/* ==========================================================================
   sky-ui tokens — één bron van waarheid voor elke Sky-app (harnas).
   Componenten kennen geen kleuren, alleen deze variabelen.
   Vier knoppen sturen alles: --hue (accent), --leven (gradients/motion 0..1),
   --radius-scale en data-dichtheid. Thema via data-theme="dark|light".
   Namen volgen sky-os/DESIGN-LANGUAGE v0.1 (--bg, --fg-2, --accent, ...),
   zodat spoor 4 (Shell/Kamer) ze 1-op-1 kan overnemen.
   ========================================================================== */

:root {
  /* knoppen */
  --hue: 285;                       /* Aurora (Daan, 10 okt): alles Aurora */
  --hue-2: calc(var(--hue) + 48);   /* tweede gradientkleur */
  --hue-3: calc(var(--hue) - 62);   /* derde gradientkleur */
  --leven: 0.75;                    /* 0 = stil en vlak, 1 = volle gradients en motion */
  --radius-scale: 1.2;
  /* --hue-vlak (optioneel, niet standaard gezet): tint van vlakken, lijnen en tekst los van het accent.
     Zonder waarde volgen ze --hue. Personal: warm papier (hue-vlak ~70) met een eigen accent. */

  /* type */
  --font-sans: 'Geist Variable', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'Fraunces Variable', 'Iowan Old Style', Georgia, serif;
  --font-display: 'Fraunces Variable', var(--font-serif);
  /* schaal (SKY-GENESIS-PLAN §6): 12/14/16/20/28/40 + 11 en 56 voor uitersten */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-20: 20px; --fs-28: 28px; --fs-40: 40px; --fs-56: 56px;

  /* ruimte: 4-px basis */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  /* radius */
  --r-xs: calc(4px * var(--radius-scale));
  --r-sm: calc(7px * var(--radius-scale));
  --r-md: calc(10px * var(--radius-scale));
  --r-lg: calc(16px * var(--radius-scale));
  --r-xl: calc(24px * var(--radius-scale));
  --r-pill: 999px;

  /* beweging: alleen om verandering te verklaren */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 480ms;

  /* lagen en bediening */
  --z-paneel: 30; --z-blad: 40; --z-ontvangst: 60; --z-menu: 70;   /* een open menu ligt boven bewijzen */
  --lade-breed: 420px;                       /* het ene detailpaneel op desktop */
  --ontvangst-onder: 24px;                   /* afstand van ontvangstbewijzen tot de onderkant (boven composer/onderbalk) */
  --doel-min: 44px;                          /* minimale aanraakmaat (Apple HIG) */

  /* dichtheid (standaard) */
  --row-h: 40px; --pad: 16px; --gap: 12px; --fs-body: 14px;
}
[data-dichtheid='compact'] { --row-h: 32px; --pad: 12px; --gap: 8px; --fs-body: 13px; }
[data-dichtheid='ruim'] { --row-h: 48px; --pad: 22px; --gap: 16px; --fs-body: 15px; }

/* ---------- donker (standaard) ---------- */
:root, [data-theme='dark'] {
  color-scheme: dark;
  --bg:   oklch(0.155 0.008 var(--hue-vlak, var(--hue)));
  --bg-1: oklch(0.185 0.010 var(--hue-vlak, var(--hue)));
  --bg-2: oklch(0.215 0.012 var(--hue-vlak, var(--hue)));
  --bg-3: oklch(0.255 0.014 var(--hue-vlak, var(--hue)));
  --bg-4: oklch(0.30 0.016 var(--hue-vlak, var(--hue)));
  --line:   oklch(1 0 0 / .07);
  --line-2: oklch(1 0 0 / .12);
  --line-3: oklch(1 0 0 / .20);
  --fg:   oklch(0.95 0.005 var(--hue-vlak, var(--hue)));
  --fg-2: oklch(0.76 0.012 var(--hue-vlak, var(--hue)));
  --fg-3: oklch(0.67 0.014 var(--hue-vlak, var(--hue))); /* ≥ 4,5:1 op --bg en --bg-1 (UI-audit 12 okt, #10) */
  --fg-inv: oklch(0.16 0.01 var(--hue-vlak, var(--hue)));
  --accent:      oklch(0.74 0.15 var(--hue));
  --accent-2:    oklch(0.82 0.11 var(--hue));
  --accent-ink:  oklch(0.17 0.04 var(--hue));
  --accent-soft: oklch(0.74 0.15 var(--hue) / .14);
  --accent-line: oklch(0.74 0.15 var(--hue) / .38);
  --ok:   oklch(0.76 0.15 155);  --ok-soft:   oklch(0.76 0.15 155 / .14);
  --warn: oklch(0.82 0.14 80);   --warn-soft: oklch(0.82 0.14 80 / .14);
  --err:  oklch(0.70 0.17 25);   --err-soft:  oklch(0.70 0.17 25 / .14);
  --info: oklch(0.76 0.12 235);  --info-soft: oklch(0.76 0.12 235 / .14);
  /* AI-native: onzeker = gestreept violet-grijs, nooit verward met fout */
  --onzeker: oklch(0.74 0.06 300); --onzeker-soft: oklch(0.74 0.06 300 / .14);
  --glass: oklch(0.20 0.012 var(--hue-vlak, var(--hue)) / .72);
  --glass-line: oklch(1 0 0 / .10);
  --shadow-1: 0 1px 0 oklch(1 0 0 / .04) inset;
  --shadow-pop: 0 1px 0 oklch(1 0 0 / .06) inset, 0 24px 60px -18px oklch(0 0 0 / .75), 0 0 0 1px oklch(1 0 0 / .08);
  --sel: oklch(0.74 0.15 var(--hue) / .16);
  --grad-a: oklch(0.62 0.20 var(--hue) / calc(.42 * var(--leven)));
  --grad-b: oklch(0.66 0.17 var(--hue-2) / calc(.30 * var(--leven)));
  --grad-c: oklch(0.70 0.14 var(--hue-3) / calc(.22 * var(--leven)));
}

/* ---------- licht ---------- */
[data-theme='light'] {
  color-scheme: light;
  --bg:   oklch(0.975 0.004 var(--hue-vlak, var(--hue)));
  --bg-1: oklch(0.99 0.002 var(--hue-vlak, var(--hue)));
  --bg-2: oklch(1 0 0);
  --bg-3: oklch(0.955 0.005 var(--hue-vlak, var(--hue)));
  --bg-4: oklch(0.925 0.007 var(--hue-vlak, var(--hue)));
  --line:   oklch(0.25 0.02 var(--hue-vlak, var(--hue)) / .08);
  --line-2: oklch(0.25 0.02 var(--hue-vlak, var(--hue)) / .14);
  --line-3: oklch(0.25 0.02 var(--hue-vlak, var(--hue)) / .24);
  --fg:   oklch(0.20 0.012 var(--hue-vlak, var(--hue)));
  --fg-2: oklch(0.42 0.016 var(--hue-vlak, var(--hue)));
  --fg-3: oklch(0.49 0.016 var(--hue-vlak, var(--hue))); /* ≥ 4,5:1 op --bg en --bg-3 (UI-audit 12 okt, #10) */
  --fg-inv: oklch(0.99 0 0);
  --accent:      oklch(0.52 0.21 var(--hue));
  --accent-2:    oklch(0.45 0.21 var(--hue));
  --accent-ink:  oklch(0.99 0 0);
  --accent-soft: oklch(0.52 0.21 var(--hue) / .09);
  --accent-line: oklch(0.52 0.21 var(--hue) / .32);
  --ok:   oklch(0.55 0.14 155);  --ok-soft:   oklch(0.55 0.14 155 / .10);
  --warn: oklch(0.62 0.15 70);   --warn-soft: oklch(0.62 0.15 70 / .12);
  --err:  oklch(0.55 0.20 25);   --err-soft:  oklch(0.55 0.20 25 / .09);
  --info: oklch(0.55 0.14 240);  --info-soft: oklch(0.55 0.14 240 / .09);
  --onzeker: oklch(0.52 0.08 300); --onzeker-soft: oklch(0.52 0.08 300 / .10);
  --glass: oklch(1 0 0 / .70);
  --glass-line: oklch(1 0 0 / .65);
  --shadow-1: 0 1px 2px oklch(0.2 0.02 var(--hue-vlak, var(--hue)) / .05);
  --shadow-pop: 0 1px 0 oklch(1 0 0 / .9) inset, 0 24px 50px -18px oklch(0.25 0.06 var(--hue-vlak, var(--hue)) / .30), 0 0 0 1px oklch(0.2 0.02 var(--hue-vlak, var(--hue)) / .08);
  --sel: oklch(0.52 0.21 var(--hue) / .10);
  --grad-a: oklch(0.80 0.12 var(--hue) / calc(.55 * var(--leven)));
  --grad-b: oklch(0.85 0.10 var(--hue-2) / calc(.45 * var(--leven)));
  --grad-c: oklch(0.88 0.09 var(--hue-3) / calc(.40 * var(--leven)));
}

@media (prefers-reduced-motion: reduce) {
  :root { --leven-motion: 0; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}