/* JIP v3 ontwerptokens. Eén bron voor app en website.
   Stijl: helmgeel dat overloopt in amber, bijna-zwart voor tekst en knoppen, matglazen vlakken (zie glas.css).
   Thema: standaard licht; donker via prefers-color-scheme of <html data-theme="dark">.
   <html data-theme="light"> forceert licht. */

:root {
  /* Kleur: ondergrond en lijnen (warm, met een zweem geel) */
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --surface-2: #FBF1DD;
  --surface-3: #F4E6C8;
  --line: #EFE3C8;
  --line-strong: #E0CFA8;

  /* Tekst */
  --ink: #14161C;
  --ink-2: #4B4F58;
  --ink-3: #696D78;
  --ink-inverse: #FFFFFF;

  /* Merk: inkt is de primaire kleur, helmgeel en amber de energie */
  --brand: #14161C;
  --brand-2: #2B2F3A;
  --brand-soft: #FFF0C2;
  --brand-ink: #FFFFFF;          /* tekst op --brand */
  --signal: #FFC72C;
  --signal-2: #FF9F1C;
  --signal-ink: #14161C;
  --grad: linear-gradient(135deg, #FFD23F 0%, #FF9F1C 100%);

  /* Glas en gloed */
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-line: rgba(255, 255, 255, .9);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(120, 70, 0, .05), 0 10px 28px rgba(120, 70, 0, .09);
  --glow-1: #FFD86A;
  --glow-2: rgba(255, 228, 150, .55);
  --glow-3: rgba(255, 159, 28, .28);
  --tab-ic: #FFC72C;             /* icoon in de actieve tab */
  --mesh-a: #FFD23F;             /* website: gloed rechtsboven */
  --mesh-b: rgba(255, 159, 28, .34);

  /* 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(20, 22, 28, .38);
  --shadow-float: 0 1px 2px rgba(80, 50, 0, .06), 0 10px 28px rgba(80, 50, 0, .10);
  --shadow-sheet: 0 -1px 2px rgba(20, 22, 28, .05), 0 -12px 40px rgba(20, 22, 28, .12);
  --focus: 0 0 0 3px rgba(255, 159, 28, .45);

  /* 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: ronder dan v2 */
  --r-card: 18px;
  --r-btn: 14px;
  --r-input: 14px;
  --r-chip: 999px;
  --r-sheet: 24px;
  --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;

  /* Merkkleur: standaard neutraal. Per element overschreven door ui.mk(merk) (zie base.css, [data-mk]). */
  --merk: #6E7480;
  --merk-solid: #5B616B;
  --merk-on: #FFFFFF;
  --merk-ink-l: #4A505A;
  --merk-ink-d: #B3BAC4;

  /* Naslagtegels en rekenhulpen: warm en koel. */
  --tone-warm: #B4530A;      --tone-warm-soft: #FFEBD2;
  --tone-cool: #0E6E86;      --tone-cool-soft: #E0F1F4;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0F12;
    --surface: #17191E;
    --surface-2: #1F2228;
    --surface-3: #272A31;
    --line: #2A2D35;
    --line-strong: #3A3E47;
    --ink: #F3F2EE;
    --ink-2: #B9BCC4;
    --ink-3: #8D919B;
    --ink-inverse: #14161C;
    --brand: #FFC72C;
    --brand-2: #FFD45C;
    --brand-soft: #2A2414;
    --brand-ink: #14161C;
    --glass: rgba(32, 34, 40, .62);
    --glass-strong: rgba(32, 34, 40, .84);
    --glass-line: rgba(255, 255, 255, .08);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .4);
    --glow-1: rgba(255, 199, 44, .26);
    --glow-2: rgba(255, 159, 28, .08);
    --glow-3: rgba(255, 159, 28, .12);
    --tab-ic: #14161C;
    --mesh-a: rgba(255, 199, 44, .24);
    --mesh-b: rgba(255, 159, 28, .10);
    --ok: #5DBB7E;    --ok-soft: #15281C;
    --warn: #E59A4B;  --warn-soft: #2E2113;
    --alert: #EE7A6F; --alert-soft: #321816;
    --info: #8FB1E8;  --info-soft: #1C2A40;
    --tone-warm: #F2A35E; --tone-warm-soft: #2E1F12;
    --tone-cool: #6FC0D6; --tone-cool-soft: #12262C;
    --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(255, 199, 44, .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0E0F12;
  --surface: #17191E;
  --surface-2: #1F2228;
  --surface-3: #272A31;
  --line: #2A2D35;
  --line-strong: #3A3E47;
  --ink: #F3F2EE;
  --ink-2: #B9BCC4;
  --ink-3: #8D919B;
  --ink-inverse: #14161C;
  --brand: #FFC72C;
  --brand-2: #FFD45C;
  --brand-soft: #2A2414;
  --brand-ink: #14161C;
  --glass: rgba(32, 34, 40, .62);
  --glass-strong: rgba(32, 34, 40, .84);
  --glass-line: rgba(255, 255, 255, .08);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .4);
  --glow-1: rgba(255, 199, 44, .26);
  --glow-2: rgba(255, 159, 28, .08);
  --glow-3: rgba(255, 159, 28, .12);
  --tab-ic: #14161C;
  --mesh-a: rgba(255, 199, 44, .24);
  --mesh-b: rgba(255, 159, 28, .10);
  --ok: #5DBB7E;    --ok-soft: #15281C;
  --warn: #E59A4B;  --warn-soft: #2E2113;
  --alert: #EE7A6F; --alert-soft: #321816;
  --info: #8FB1E8;  --info-soft: #1C2A40;
  --tone-warm: #F2A35E; --tone-warm-soft: #2E1F12;
  --tone-cool: #6FC0D6; --tone-cool-soft: #12262C;
  --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(255, 199, 44, .45);
  color-scheme: dark;
}