/* =============================================================================
   i-Reserve redesign 2026 — design tokens
   -----------------------------------------------------------------------------
   Herkomst: de `.horizon`-skin uit iReserve_wireframes_v1.12.html. Dat is de
   enige plek in de wireframes waar een kleurrichting is uitgesproken; het
   basispalet daar is bewust grijs. Zie docs/redesign/analyse-aanpak.md §5.

   KLEUREN — komen uit de `.horizon`-skin in de wireframes, die daar staat met
   het commentaar "tokens uit huisstijl-PDF v2". Dat is dus de huisstijl zelf,
   exact overgenomen. Het logo-redesign (groene en blauwe gradiënt) zit als
   SVG in dezelfde wireframes; die gradiëntstops staan hieronder als merkkleuren.

   Alle componenten lezen UITSLUITEND deze tokens. Nooit een hex in een
   componentregel — dan is de kleurbeslissing straks één regel werk.
   ============================================================================= */

:root {
  /* --- modus -------------------------------------------------------------
     Fase 1 is uitsluitend licht. Dit zet ook de UA-onderdelen (formulier-
     velden, scrollbars, autofill) vast op licht, zodat een bezoeker met een
     donker systeemthema exact hetzelfde ziet als wij. Fase 2 haalt dit weg
     en zet de donkere tokens hieronder weer aan. */
  color-scheme: light;

  /* --- merk ---------------------------------------------------------------
     Rechtstreeks uit het logo-redesign dat in de wireframes zit
     (templates/redesign/img/logo-ireserve.svg): twee gradiënten, groen en
     blauw, géén oranje. De middenstop van elke gradiënt is de volvlakkleur.
     Niet direct in componenten gebruiken — ze voeden de semantische tokens. */
  --brand-green-light: #a6e23f;
  --brand-green:       #72be1b;   /* middenstop groene gradiënt */
  --brand-green-dark:  #3c8a0c;
  --brand-blue-light:  #49b9ee;
  --brand-blue:        #1667b5;   /* huisstijl Horizon v2: primair merkblauw 500 (was #1f7fcb, dat is daar de status-kleur "Info") */
  --brand-blue-dark:   #0e4e93;
  --wf-blue:           #1667b5;   /* accent uit de `.horizon`-skin */

  /* --- neutralen ----------------------------------------------------------
     Rechtstreeks uit `.horizon`: --ink #2C4351, --line #DBE4EC,
     --fill #EDF2F6, --fill2 #F7F9FA. Koel blauwgrijs, in lijn met het accent. */
  --c-ink:        #2c4351;   /* lopende tekst — huisstijl */
  --c-ink-strong: #0b2a3d;   /* koppen — huisstijl */
  --c-ink-muted:  #576c7e;   /* bijschriften, meta. Huisstijl "Small" is #5C7183, maar die haalt op grijs (#EDF2F6) 4,497:1 en op het accentvlak 4,40:1 (WCAG 4,5:1). #576C7E: 4,84 / 4,73, op wit 5,45 (keuze Jacq, huisstijl _v4) */
  --c-ink-faint:  #8399a9;   /* placeholders, uitgeschakeld */
  --c-quote-mark: #9fb1be;  /* groot aanhalingsteken bij quote-koppen (/klanten/) — grijs uit huisstijl Horizon v4 (keuze Jacq, 29-09-2026) */
  --c-line:       #dbe4ec;   /* randen, scheidingslijnen */
  --c-line-soft:  #e8eef4;   /* subtiele scheiding binnen een blok */
  --c-surface:    #ffffff;   /* kaarten, panelen */
  --c-surface-2:  #edf2f6;   /* ingesprongen vlak, tabelkop — huisstijl --fill */
  --c-ink-invert: #c6d8e4;   /* tekst op het donkere vlak (footer, CTA-band) */
  --c-ink-invert-strong: #ffffff;   /* koppen op het donkere vlak (huisstijl --ir-white in .section-dark) */
  --c-ink-invert-muted: #9db2c2;    /* ingetogen labels op het donkere vlak, o.a. footerkoppen: 6,78:1 op #0B2A3D (WCAG AA 4,5:1). Zelfde grijs als --c-ink-muted in de donkere modus (keuze Jacq, 28-09-2026) */
  --c-cta-on-dark:       #72be1b;   /* proefknop op het donkere vlak — huisstijl Groen 500, 6,44:1 op diepzee (keuze Jacq) */
  --c-cta-on-dark-hover: #a6e23f;   /* Groen 400: op donker wordt hover lichter, niet donkerder */
  --c-cta-on-dark-ink:   #0b2a3d;   /* tekst op die knop: diepzee (6,44:1); wit haalt op groen 500 maar 2,31:1 */
  --c-accent-on-dark:       #49b9ee;   /* blauwe knop op het donkere vlak — huisstijl Blauw 400, 6,69:1 op diepzee (keuze Jacq); ook de focusring daar */
  --c-accent-on-dark-hover: #a9d5f2;   /* Blauw 200 (9,55:1): op donker wordt hover lichter, net als bij groen */
  --c-accent-on-dark-ink:   #0b2a3d;   /* tekst op die knop: diepzee (6,69:1) */
  --c-line-on-dark: #5c7183;   /* decoratieve scheidingslijn op het donkere vlak (footer) — huisstijl --ir-on-dark-border. Niet voor randen van bedieningselementen: daar --c-ink-invert-border (contrast) */
  --c-ink-invert-border: #d9ebfa;   /* randen op het donkere vlak, o.a. outline-knop — huisstijl Blauw 100. Niet --ir-on-dark-border (#5c7183): die haalt maar 2,93:1, WCAG 1.4.11 vraagt 3:1; #d9ebfa haalt 12,18:1 (keuze Jacq) */
  --c-dark:       #0b2a3d;   /* donker vlak: footer en CTA-band */
  /* Exacte huisstijl-paginagrond (#F7F9FA). Het "vel op grijze grond"
     (voorheen #dfe2e6 + max-width) was een verkeerde lezing van de
     wireframe-viewer — zie base.css bij .sheet. */
  --c-page:       #f7f9fa;
  --c-sheet:      #ffffff;   /* achtergrond van header, content en footer */

  /* --- semantisch --------------------------------------------------------- */
  --c-accent:        var(--brand-blue);       /* huisstijl merkblauw 500 #1667b5 — links, actieve nav, uitgelichte kaart */
  --c-accent-ink:    var(--brand-blue-dark);  /* accent als tekstkleur op licht */
  /* Groen is in de huisstijl NIET de kleur van elke primaire knop, maar
     uitsluitend van de proefversie-CTA: `.horizon [data-p="proef"].btn.p`.
     Alle andere primaire knoppen zijn blauw. */
  --c-cta:           #2f6e09;   /* proefversie-knop, exact uit de huisstijl */
  --c-cta-hover:     #265907;
  --c-cta-on:        #ffffff;
  --c-accent-soft:   #e7f0f9;                 /* accentvlak, 8% */
  --c-tag-bg:        #d9ebfa;                 /* label (koppelingdetail: Type, Vanaf) — wireframe --p1, huisstijl Blauw 100 */
  --c-tag-ink:       #0a3563;                 /* tekst op dat label — wireframe --p8, huisstijl Blauw 800 */
  --c-accent-on:     #ffffff;                 /* tekst óp het accent */
  --c-focus:         var(--brand-blue);
  --c-accent-grad:   linear-gradient(150deg, var(--brand-blue-light), var(--brand-blue-dark));

  --c-success:  #3f7d13;
  --c-warning:  #a8690c;
  --c-danger:   #a53a3a;

  /* --- typografie ---------------------------------------------------------
     Sora voor koppen, DM Sans voor lopende tekst — zoals de wireframes.
     TODO: fonts zelf hosten (privacy + één CSP-uitzondering minder). */
  --font-display: Sora, "DM Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Schaal met 16px als basis; 44px is de hero-maat uit de wireframes.
     clamp() zodat de bovenkant meeschaalt zonder media queries. */
  --text-xs:   0.8125rem;   /* 13px — meta, labels */
  --text-sm:   0.875rem;    /* 14px — bijschrift, tabelcel */
  --text-base: 1rem;        /* 16px — lopende tekst */
  --text-md:   1.125rem;    /* 18px — intro */
  --text-lg:   1.3125rem;   /* 21px — h3 */
  --text-xl:   clamp(1.5rem, 1.32rem + 0.75vw, 1.75rem);    /* h2 klein */
  --text-2xl:  clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);    /* h2 */
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.2vw, 2.75rem);    /* h1 / hero 44px */

  --lh-tight:  1.15;
  --lh-snug:   1.32;
  --lh-body:   1.62;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-tight: -0.015em;   /* grote koppen */
  --tracking-label:  0.10em;    /* uppercase labels */

  /* --- maatvoering --------------------------------------------------------
     Stappen van 4px; de wireframes werken op datzelfde raster. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  --section-gap:  clamp(3rem, 2rem + 4vw, 5.5rem);  /* verticale ruimte tussen secties */
  --plans-2-max:  760px;   /* /prijzen/: breedte van 2 × 2 pakketkaarten + het Managed-blok eronder */
  --gutter:       clamp(1rem, 0.5rem + 2vw, 2rem);  /* zijmarge, min. 16px */

  /* --- vorm ---------------------------------------------------------------
     Radii uit de wireframes: 6 / 8 / 12 / 16 / 999. */
  /* Hoogte van de plakkende header: wat eronder vastplakt moet hier onder blijven. */
  --header-h:    69px;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 41, 58, .06);
  --shadow-md: 0 1px 2px rgba(20, 41, 58, .06), 0 8px 24px -16px rgba(20, 41, 58, .30);
  --shadow-lg: 0 2px 4px rgba(20, 41, 58, .06), 0 24px 48px -24px rgba(20, 41, 58, .34);

  /* --- breedtes ----------------------------------------------------------- */
  --width-prose: 68ch;    /* lopende tekst blijft leesbaar */
  --width-content: 1080px;
  --width-wide:    1280px;

  /* --- beweging ----------------------------------------------------------- */
  --ease:      cubic-bezier(.2, .6, .3, 1);
  --duration:  180ms;
}

/* =============================================================================
   DONKERE MODUS — UIT IN FASE 1
   -----------------------------------------------------------------------------
   Fase 1 levert alleen de lichte variant; de wireframes kennen ook niets
   anders. De automatische modus (`prefers-color-scheme`) stond hier eerder aan,
   waardoor een bezoeker met een donker systeemthema een niet-ontworpen variant
   te zien kreeg. Dat is uitgezet: samen met `color-scheme: light` op :root
   krijgt iedereen nu dezelfde lichte site.

   De tokens hieronder zijn bewaard als startpunt voor fase 2 (eerste benadering,
   geen ontwerp). Weer aanzetten = dit blok uit commentaar halen én de
   `color-scheme: light` bovenin weghalen of naar `light dark` zetten.

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ink:        #dce7ef;
    --c-ink-strong: #f1f6fa;
    --c-ink-muted:  #9db2c2;
    --c-ink-faint:  #6f8698;
    --c-quote-mark: #6f8698;
    --c-line:       #22404f;
    --c-line-soft:  #1b3444;
    --c-surface:    #10222f;
    --c-surface-2:  #17303f;
    --c-page:       #060f16;
    --c-sheet:      #0b1a24;
    --c-accent:     #5fa9e8;
    --c-accent-ink: #9ccbf3;
    --c-accent-soft:#15334c;
    --c-accent-on:  #06121b;
    --c-cta:        #5f9e2a;
    --c-cta-hover:  #6fb033;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -16px rgba(0, 0, 0, .80);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 24px 48px -24px rgba(0, 0, 0, .85);
  }
}

:root[data-theme="dark"] {
  --c-ink:        #dce7ef;
  --c-ink-strong: #f1f6fa;
  --c-ink-muted:  #9db2c2;
  --c-ink-faint:  #6f8698;
  --c-quote-mark: #6f8698;
  --c-line:       #22404f;
  --c-line-soft:  #1b3444;
  --c-surface:    #10222f;
  --c-surface-2:  #17303f;
  --c-page:       #060f16;
  --c-sheet:      #0b1a24;
  --c-accent:     #5fa9e8;
  --c-accent-ink: #9ccbf3;
  --c-accent-soft:#15334c;
  --c-accent-on:  #06121b;
  --c-cta:        #5f9e2a;
  --c-cta-hover:  #6fb033;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -16px rgba(0, 0, 0, .80);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 24px 48px -24px rgba(0, 0, 0, .85);
}

   ============================================================================= */