/* Soverra design tokens.
   Two themes map to the two brand pillars:
   light (default) = Pijler 2 · CIO-as-a-Service (the strategy table)
   .mode-dark       = Pijler 1 · Beheer / MSP (the engine room, Voltage glows)
   Apply .mode-dark to any wrapper to flip a subtree to the dark theme. */
:root{
  /* --- brand constants (both themes) --- */
  --sov:#15402E; --sov-deep:#0B231A; --sov-hover:#1B5440;
  --voltage:#C7F94E; --voltage-deep:#5D7A16; --signal-ink:#0B0D12;

  /* --- type --- */
  --display:"Bricolage Grotesque",system-ui,sans-serif; --dls:-.03em;
  --sans:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --word:"Syne",var(--display);

  /* --- light theme (default) --- */
  --bg:#FCFCFD; --surface:#FFFFFF; --surface2:#F4F6F7;
  --line:#E6E9EC; --line-strong:#8A9299;
  --ink:#0D1714; --slate:#586460; --muted:#68716D;
  --sov-tint:#E6F0EA;
  /* on light, Voltage deepens for text/lines so it stays legible; bright Voltage only fills blocks */
  --signal:#5D7A16; --signal-line:#5D7A16; --signal-soft:#EFFBCF;
  --sov-btn-ink:#FFFFFF;
  --card-shadow:0 1px 2px rgba(13,23,20,.05),0 18px 40px rgba(13,23,20,.10);
  /* focus ring: must be legible on the surface it lands on */
  --focus:#0D1714;
  /* form error states */
  --danger:#A32116; --danger-soft:#FBE3E0;
}

.mode-dark{
  --bg:#0B0D12; --surface:#14171F; --surface2:#191D27;
  --line:rgba(222,217,204,.15); --line-strong:rgba(222,217,204,.40);
  --ink:#F3F1EA; --slate:#AEB4C0; --muted:#7F8693;
  --sov-tint:rgba(21,64,46,.35);
  /* on dark, Voltage carries text AND lines directly */
  --signal:var(--voltage); --signal-line:var(--voltage); --signal-soft:rgba(199,249,78,.14);
  --sov-btn-ink:#F3F1EA;
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
  background:var(--bg); color:var(--ink);
  --focus:#C7F94E;
  --danger:#FF8A7A; --danger-soft:rgba(163,33,22,.22);
}

/* --sov-deep surface: the close band and the footer. Counts as dark for the
   Voltage legibility rule, so Voltage carries text and lines directly here. */
.mode-deep{
  --bg:#0B231A; --surface:#0F2C21; --surface2:#0F2C21;
  --line:rgba(243,241,234,.16); --line-strong:rgba(243,241,234,.40);
  --ink:#F3F1EA; --slate:#9FB6AA; --muted:#9FB6AA;
  --sov-tint:rgba(199,249,78,.10);
  --signal:var(--voltage); --signal-line:var(--voltage); --signal-soft:rgba(199,249,78,.14);
  --sov-btn-ink:#0B231A;
  --focus:#C7F94E; --danger:#FF8A7A; --danger-soft:rgba(163,33,22,.22);
  --card-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
  background:var(--bg); color:var(--ink);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:var(--dls);margin:0}
p{margin:0 0 1rem}