/* GEGENEREERD — kopie van design/oomny-ui.tokens.css.
 * Wijzig de bron en draai `python3 design/sync-embedded.py`; een
 * bewerking hier wordt overschreven en maakt de drift-test rood.
 */
/* ============================================================================
   oomny-ui tokens v1 — de huisstijl van oomny, in app-profiel.
   Gedeeld door Oomny Finance, Oomny Clips en Oomny GPU.

   HERKOMST. Dit is geen nieuw palet. De kleuren komen ongewijzigd uit de
   oomny-huisstijl (oomny-apps `web/src/assets/theme.css`, de umbrella-skin) en
   de structuur uit `web/src/assets/tokens.css` — dezelfde bestanden waar
   oomny.eu op draait. De merkgids staat in de oomny-design skill; lees die voor
   de stem, de merkobjecten en de regels achter deze waarden.

   WAT HIER ANDERS IS DAN OP DE WEBSITE, en waarom. De site is marketing voor een
   ouder, niet-technisch publiek: body op 17-19px en `--radius: 18px`. Deze drie
   surfaces zijn datadichte werkschermen — een tabel met acht kolommen op 19px
   past niet, en 18px ronding op een tabelknop oogt speels waar rust nodig is.
   De merkgids voorziet daar zelf in: `--radius` cascadeert per merk en Kestrove
   staat al vierkanter op 14px ("utility feel"). Dit is diezelfde beweging, één
   stap verder. ALLES wat identiteit draagt — kleur, fonts, motion, elevatie,
   de hairline-kaart, de halo — blijft ongewijzigd.

   WAAROM DIT BESTAND BESTAAT. Tot 2026-08-11 schreef elke dienst deze huid met
   de hand na. Clips en GPU volgden de donkere umbrella-skin correct maar hadden
   geen lichte helft; Finance stond op shadcn's wárme neutraal met het merkblauw
   als losse variabele ernaast, en week dus als enige echt af. Geen van de drie
   gebruikte de structurele laag (type-schaal, spacing-ramp, radii, motion,
   elevatie) die al bestond.

   TWEE VOCABULAIRES, ÉÉN PALET. De oomny-namen (--bg/--surface/--text/--accent)
   zijn de bron; onderaan staan de shadcn-namen (--background/--foreground/
   --card/--primary/…) als alias. Daardoor werkt een Tailwind+shadcn-app en een
   pagina met handgeschreven CSS op exact dezelfde waarden, en verschuift een
   merkkleur op één plek.

   ELK PAAR IS GEMETEN (WCAG 2.2: 4,5:1 tekst, 3:1 UI-componenten). Twee
   uitkomsten stuurden dit bestand:
     · --accent (#3aa7df) draagt met witte tekst 2,70:1 en kan dus GEEN knopvlak
       met tekst zijn. De huisstijl zegt dit zelf ("--accent voor fills,
       --accent-text voor tekst"); in licht is de primaire knop daarom
       --accent-text (#0e6f9e, 5,55:1 op wit). In donker mág het merkblauw wél
       vlak zijn, met de donkere --accent-ink erop (8,29:1).
     · --line (#dde4e9) haalt 1,20:1 op --bg. Prima als scheiding tussen vlakken,
       te zwak voor de rand van een invoerveld; daarvoor staat --line-strong
       (3,19:1 licht / 3,32:1 donker).
   ============================================================================ */

:root {
  /* ---- type: systeemfonts, geen webfonts (merkaxioma A3) ------------------ */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Dezelfde ~1.25 modulaire ratio als de site, één stap compacter gezet voor
     werkschermen. clamp() zodat er geen breekpunten nodig zijn. */
  --step--2: clamp(.6875rem, .67rem + .08vw, .75rem);   /* meta, tabelkop      */
  --step--1: clamp(.75rem, .73rem + .1vw, .8125rem);    /* secundaire tekst    */
  --step-0:  clamp(.875rem, .86rem + .1vw, .9375rem);   /* body                */
  --step-1:  clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --step-2:  clamp(1.3rem, 1.2rem + .4vw, 1.5rem);
  --step-3:  clamp(1.6rem, 1.4rem + .9vw, 2.1rem);
  --step-4:  clamp(2.1rem, 1.7rem + 1.8vw, 3rem);       /* het ene grote getal */

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --display: var(--sans);
  --display-tracking: -.018em;
  --eyebrow-tracking: .08em;   /* het enige UPPERCASE-element in de huisstijl */

  /* ---- ruimte ------------------------------------------------------------- */
  --sp-0: .25rem; --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem;
  --sp-4: 1.5rem; --sp-5: 2.25rem; --sp-6: 3.5rem;
  --measure: 34rem;        /* ~66ch leesbreedte voor lopende tekst */
  --measure-wide: 46rem;

  /* ---- vorm: de utility-stap van de merkcascade --------------------------- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: calc(var(--radius) + 4px);
  --radius-pill: 999px;

  /* ---- motion: verbatim uit de huisstijl ---------------------------------- */
  --ease: cubic-bezier(.16, .84, .44, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-1: .15s;
  --dur-2: .3s;
  --dur-3: .7s;

  /* ---- elevatie: achromatisch, nooit merkkleur ---------------------------- */
  --shadow-1: 0 1px 2px -1px rgb(0 0 0 / .12), 0 2px 6px -3px rgb(0 0 0 / .10);
  --shadow-2: 0 6px 16px -10px rgb(0 0 0 / .30), 0 2px 6px -4px rgb(0 0 0 / .18);
  --shadow-3: 0 30px 70px -40px rgb(0 0 0 / .55), 0 8px 22px -14px rgb(0 0 0 / .30);
}

/* ---------------------------------------------------------------------------
   LICHT — de umbrella-skin, koele neutralen onder een sky-blue accent.
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"],
.light {
  --bg: #f5f7f9;
  --bg-2: #e9eef2;
  --surface: #ffffff;
  --surface-2: #f8fafb;        /* gestreepte rijen, tabelkoppen                */
  --text: #14191d;             /* 16,48:1 op --bg                              */
  --text-soft: #586670;        /* 5,51:1 op --bg · 5,92:1 op --surface         */
  --line: #dde4e9;             /* vlakscheiding                                */
  --line-strong: #7f939f;      /* randen van invoervelden · 3,19:1 op wit      */

  --accent: #3aa7df;           /* het logo-blauw: vlakken, iconen, grafiek     */
  --accent-2: #5bb8e8;
  --accent-text: #0e6f9e;      /* links, kleine tekst, knopvlak · 5,55:1       */
  --accent-ink: #ffffff;       /* tekst óp --accent-text                       */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 42%, var(--line));

  --verified: #2f8f5e;         /* 4,03:1 — goed nieuws, geslaagd, vrij         */
  --verified-text: #217049;
  --caution: #b07d22;          /* de waarschuwingskleur van de huisstijl       */
  --caution-text: #8a6014;     /* 5,58:1                                       */
  --danger: #b4392f;           /* 5,89:1 — zie de noot bij "rood" hieronder    */
  --danger-text: #a8352c;
  --danger-ink: #ffffff;

  /* Zachte statusvlakken voor badges en gemarkeerde rijen. color-mix zodat een
     hueverschuiving in het merk automatisch meeloopt. */
  --verified-soft: color-mix(in srgb, var(--verified) 14%, var(--surface));
  --caution-soft: color-mix(in srgb, var(--caution) 16%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));

  --halo: radial-gradient(58% 55% at 80% -10%,
          color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  --chip-bg: var(--surface);
  --ring: var(--accent-text);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   DONKER — de diepe koele skin met een vleug blauwe atmosfeer. Dit is wat Clips
   en GPU al droegen; hier staat hij nu één keer.
   --------------------------------------------------------------------------- */
[data-theme="dark"],
.dark {
  --bg: #0b1117;
  --bg-2: #111a22;
  --surface: #16212b;
  --surface-2: #1c2935;
  --text: #eaf1f6;             /* 16,64:1 op --bg                              */
  --text-soft: #94a5b0;        /* 6,43:1 op --surface                          */
  --line: #23323f;
  --line-strong: #5b7484;      /* 3,32:1 op --surface                          */

  --accent: #54b6ec;
  --accent-2: #76c6f0;
  --accent-text: #6cc3ef;      /* 9,66:1 op --bg                               */
  --accent-ink: #07131c;       /* donkere tekst óp het blauw · 8,29:1          */
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 38%, var(--line));

  --verified: #7fc9a3;         /* 8,38:1 op --surface                          */
  --verified-text: #7fc9a3;
  --caution: #d9b36a;
  --caution-text: #e0bd79;     /* 9,11:1 op --surface                          */
  --danger: #ef9a94;           /* 7,56:1 op --surface                          */
  --danger-text: #ef9a94;
  --danger-ink: #2a0f0c;

  --verified-soft: color-mix(in srgb, var(--verified) 16%, var(--surface));
  --caution-soft: color-mix(in srgb, var(--caution) 18%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 16%, var(--surface));

  --halo: radial-gradient(58% 55% at 80% -10%,
          color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  --chip-bg: #1c2935;
  --ring: var(--accent);

  color-scheme: dark;
}

/* Geen expliciete keuze gemaakt? Volg het systeem. De selector sluit een
   gepinde lichte stand uit, zodat een gebruiker die wél koos altijd wint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --bg: #0b1117;
    --bg-2: #111a22;
    --surface: #16212b;
    --surface-2: #1c2935;
    --text: #eaf1f6;
    --text-soft: #94a5b0;
    --line: #23323f;
    --line-strong: #5b7484;
    --accent: #54b6ec;
    --accent-2: #76c6f0;
    --accent-text: #6cc3ef;
    --accent-ink: #07131c;
    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
    --accent-line: color-mix(in srgb, var(--accent) 38%, var(--line));
    --verified: #7fc9a3;
    --verified-text: #7fc9a3;
    --caution: #d9b36a;
    --caution-text: #e0bd79;
    --danger: #ef9a94;
    --danger-text: #ef9a94;
    --danger-ink: #2a0f0c;
    --verified-soft: color-mix(in srgb, var(--verified) 16%, var(--surface));
    --caution-soft: color-mix(in srgb, var(--caution) 18%, var(--surface));
    --danger-soft: color-mix(in srgb, var(--danger) 16%, var(--surface));
    --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
    --chip-bg: #1c2935;
    --ring: var(--accent);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
   OVER ROOD. De merkgids verbiedt alarmrood in de consumenten-apps: daar is
   --caution het enige waarschuwingssignaal. Deze drie surfaces zijn interne
   werktuigen waar een dienst écht stuk kan zijn (daemon onbereikbaar, exit ≠ 0,
   een bake die faalde), en dat verschil moet zichtbaar zijn zonder de tekst te
   lezen. --danger is daarom bewust een ingehouden baksteenrood en géén
   signaalrood, en de regel blijft: --caution voor "let hierop", --danger
   uitsluitend voor "dit is kapot".

   CATEGORIEKLEUREN (Clips). De zeven defectsoorten liggen naast elkaar op één
   tijdbalk. Dat is codering, geen merkkleur: ze zijn gekozen op onderlinge
   onderscheidbaarheid én ≥3:1 tegen het vlak waarop ze getekend worden, en
   dragen daarom bewust hues die het merk zelf niet gebruikt.
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"],
.light {
  --defect-wobble: #c2410c;
  --defect-roll: #be123c;
  --defect-defocus: #7e22ce;
  --defect-motion_blur: #4338ca;
  --defect-upscaled_source: #0e7490;
  --defect-framing: #a16207;
  --defect-orientation: #15803d;
  --ster: #b07d22;
}

[data-theme="dark"],
.dark {
  --defect-wobble: #fb923c;
  --defect-roll: #fb7185;
  --defect-defocus: #c084fc;
  --defect-motion_blur: #a5b4fc;
  --defect-upscaled_source: #22d3ee;
  --defect-framing: #facc15;
  --defect-orientation: #4ade80;
  --ster: #d9b36a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --defect-wobble: #fb923c;
    --defect-roll: #fb7185;
    --defect-defocus: #c084fc;
    --defect-motion_blur: #a5b4fc;
    --defect-upscaled_source: #22d3ee;
    --defect-framing: #facc15;
    --defect-orientation: #4ade80;
    --ster: #d9b36a;
  }
}

/* ---------------------------------------------------------------------------
   SHADCN-ALIASSEN. Eén palet, tweede vocabulaire: hiermee draait een
   shadcn/Tailwind-app (Finance, Clips) op precies dezelfde waarden als een
   pagina met handgeschreven CSS (GPU). Niets hieronder is een nieuwe kleur —
   het zijn verwijzingen. Wijzig kleuren altijd bovenin, nooit hier.
   --------------------------------------------------------------------------- */
:root {
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --popover: var(--surface);
  --popover-foreground: var(--text);
  --primary: var(--accent-text);
  --primary-foreground: var(--accent-ink);
  --secondary: var(--bg-2);
  --secondary-foreground: var(--text);
  --muted: var(--bg-2);
  --muted-foreground: var(--text-soft);
  /* LET OP — de enige naam die in beide systemen iets ANDERS betekent. In de
     oomny-huisstijl is --accent de merkkleur (het logo-blauw); in shadcn is
     --accent de zachte achtergrond van een hover-state, en --primary draagt daar
     de merkkleur. Vandaar --accent-bg: een Tailwind-app moet
     `--color-accent: var(--accent-bg)` mappen, anders wordt elke ghost-knop bij
     hover knalblauw in plaats van rustig getint. */
  --accent-bg: var(--accent-soft);
  --accent-foreground: var(--text);
  --destructive: var(--danger);
  --destructive-foreground: var(--danger-ink);
  --border: var(--line);
  --input: var(--line-strong);
  --brand: var(--accent);
}

/* In donker is het merkblauw zélf het knopvlak: daar haalt het mét de donkere
   inkt 8,29:1, waar de lichte stand een donkerder blauw nodig had. */
[data-theme="dark"],
.dark {
  --primary: var(--accent);
  --primary-foreground: var(--accent-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --primary: var(--accent);
    --primary-foreground: var(--accent-ink);
  }
}