/* JIP v2 ontwerptokens. Eén bron voor app en website.
   Thema: standaard licht; donker via prefers-color-scheme of <html data-theme="dark">.
   <html data-theme="light"> forceert licht. */

:root {
  /* Kleur: ondergrond en lijnen */
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #EFEDE6;
  --surface-3: #E7E4DB;
  --line: #E2DFD6;
  --line-strong: #CFCBC0;

  /* Tekst */
  --ink: #16191E;
  --ink-2: #4A505A;
  --ink-3: #6E7480;
  --ink-inverse: #FFFFFF;

  /* Merk */
  --brand: #1D3B6E;
  --brand-2: #2F5FA8;
  --brand-soft: #E6ECF6;
  --brand-ink: #FFFFFF;          /* tekst op --brand */
  --signal: #FFC72C;             /* spaarzaam: actieve tab, beeldmerk, highlights */
  --signal-ink: #16191E;

  /* Status */
  --ok: #1F7A3E;     --ok-soft: #E4F2E8;
  --warn: #B45309;   --warn-soft: #FDF0DC;
  --alert: #C2362A;  --alert-soft: #FBE6E3;
  --info: #2F5FA8;   --info-soft: #E6ECF6;

  /* Overlay en schaduw */
  --scrim: rgba(15, 18, 22, .38);
  --shadow-float: 0 1px 2px rgba(22, 25, 30, .06), 0 8px 24px rgba(22, 25, 30, .06);
  --shadow-sheet: 0 -1px 2px rgba(22, 25, 30, .05), 0 -12px 40px rgba(22, 25, 30, .10);
  --focus: 0 0 0 3px rgba(47, 95, 168, .35);

  /* Typografie */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-display: 28px; --lh-display: 34px;
  --fs-h1: 22px;      --lh-h1: 28px;
  --fs-h2: 18px;      --lh-h2: 24px;
  --fs-body: 16px;    --lh-body: 24px;
  --fs-small: 14px;   --lh-small: 20px;
  --fs-label: 12px;   --lh-label: 16px;
  --tracking-label: .06em;

  /* Vorm */
  --r-card: 14px;
  --r-btn: 12px;
  --r-input: 12px;
  --r-chip: 999px;
  --r-sheet: 20px;
  --hit: 48px;                    /* minimale touch target */

  /* Ruimte (4px-raster) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 16px;

  /* Beweging */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 360ms;

  /* Merktegels: gedempte merkkleuren (geen merklogo's) */
  --m-panasonic: #3B5B8C;
  --m-kronoterm: #2F6B5A;
  --m-qvantum: #4A5560;
  --m-hydrotop: #1D3B6E;
  --m-binnenkort: #8A8F98;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1216;
    --surface: #171B21;
    --surface-2: #1E232B;
    --surface-3: #252B34;
    --line: #2A313B;
    --line-strong: #3A424E;
    --ink: #EEF0F3;
    --ink-2: #B3BAC4;
    --ink-3: #8C94A0;
    --ink-inverse: #0F1216;
    --brand: #8FB1E8;
    --brand-2: #A9C4EF;
    --brand-soft: #1C2A40;
    --brand-ink: #0F1216;
    --ok: #5DBB7E;    --ok-soft: #15281C;
    --warn: #E59A4B;  --warn-soft: #2E2113;
    --alert: #EE7A6F; --alert-soft: #321816;
    --info: #8FB1E8;  --info-soft: #1C2A40;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .5);
    --focus: 0 0 0 3px rgba(143, 177, 232, .4);
    --m-panasonic: #6F8DBE;
    --m-kronoterm: #5E9C89;
    --m-qvantum: #8995A2;
    --m-hydrotop: #7E9FD6;
    --m-binnenkort: #6B717B;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0F1216;
  --surface: #171B21;
  --surface-2: #1E232B;
  --surface-3: #252B34;
  --line: #2A313B;
  --line-strong: #3A424E;
  --ink: #EEF0F3;
  --ink-2: #B3BAC4;
  --ink-3: #8C94A0;
  --ink-inverse: #0F1216;
  --brand: #8FB1E8;
  --brand-2: #A9C4EF;
  --brand-soft: #1C2A40;
  --brand-ink: #0F1216;
  --ok: #5DBB7E;    --ok-soft: #15281C;
  --warn: #E59A4B;  --warn-soft: #2E2113;
  --alert: #EE7A6F; --alert-soft: #321816;
  --info: #8FB1E8;  --info-soft: #1C2A40;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .5);
  --focus: 0 0 0 3px rgba(143, 177, 232, .4);
  --m-panasonic: #6F8DBE;
  --m-kronoterm: #5E9C89;
  --m-qvantum: #8995A2;
  --m-hydrotop: #7E9FD6;
  --m-binnenkort: #6B717B;
  color-scheme: dark;
}