/* GEGENEREERD BESTAND, NIET HANDMATIG AANPASSEN.
   Kopie uit content/growthos-nl/design-system/, want de site wordt vanuit
   deze map gedeployed en kan niet buiten zijn eigen wortel lezen.
   Bijwerken: python scripts/sync-design-tokens.py
   ===================================================================== */

/* GEGENEREERD BESTAND, NIET HANDMATIG AANPASSEN.
   Gebouwd uit tokens.src.css door scripts/sync-design-tokens.py.
   Pas de tokens dáár aan: één regel per token, light-dark(licht, donker).
   ===================================================================== */

/* =====================================================================
   Ensemblo Design System — Design Tokens  (v0.1 · 2026-07-23)
   Merkwerelden:  LIGHT = Porselein & Kobalt   ·   DARK = Nachtstudio
   Thema-strategie: alle componenten stylen via var(--token).
   - default :root            = light
   - @media (prefers-color-scheme: dark)  = OS-voorkeur
   - :root[data-theme="dark|light"]       = expliciete gebruikerskeuze (wint altijd)
   ===================================================================== */

:root{
  /* ---- Merk / accent ---- */
  --brand:#2547E6;           /* Kobalt / Limoen — primaire actie, actief, links */
  --brand-ink:#FFFFFF;       /* tekst op --brand (donker: op limoen) */
  --brand-soft:#EAEEFF;      /* zachte brand-vlakken (actieve nav, badges) */
  --accent:#FF6B4A;          /* Koraal / Cyaan — urgentie, handoff, secundair accent */
  --accent-ink:#171A21;  /* donkere tekst: wit op koraal haalde 2.82 */

  /* ---- Semantisch (los van accent) ---- */
  --good:#1F9E6E;   --good-soft:#E5F5EE;   /* goedgekeurd / verbonden / positief */
  --warn:#C98A12;   --warn-soft:#FBF1DC;   /* let op */
  --crit:#E5484D;   --crit-soft:#FBE9E9;   /* fout / afwijzen / kritiek */

  /* ---- Status als lopende tekst ----
     --good/--warn/--crit zijn vlakkleuren. Op wit halen ze de leesbaarheids-
     drempel uit de contrasttabel niet als je er tekst mee zet (--warn komt op
     ongeveer 3:1). Deze drie zijn dezelfde kleuren, donkerder, voor woorden.
     In Nachtstudio is het omgekeerd: daar zijn de vlakkleuren juist licht
     genoeg, dus vallen ze samen. */
  --good-tekst:#177A55;
  --warn-tekst:#92650C;
  --crit-tekst:#C13439;

  /* ---- Lichtere merkvarianten (verlopen) ----
     Alleen bedoeld als beginpunt van een verloop dat op --brand, --accent of
     --ink uitkomt. Nooit als losse vlakkleur: dan ontstaat er een tweede
     kobalt naast de echte. */
  --brand-licht:#5D77F0;
  --accent-licht:#FF8B6E;
  --ink-licht:#3A3F4D;

  /* ---- Omgekeerde secties ----
     Een donker vlak binnen een lichte pagina, zoals de demo- en slotsectie op
     de homepage. De gewone --ink/--muted/--faint zijn daar onleesbaar, dus
     hoort daar een eigen trap bij.

     Let op bij dual-theme: in Nachtstudio is de pagina zelf al donker en is
     "omgekeerd" dus licht. Die kant is hieronder ingevuld, maar niet in de
     praktijk beproefd; de site staat bewust op data-theme="light". */
  --invers-sterk:#FFFFFF;  /* koppen op een donker vlak, de helderste trap */
  --invers-ink:#D9E0FF;    /* lopende tekst op een donker vlak */
  --invers-muted:#C7D2FF;  /* labels en secundaire tekst daar */
  --invers-faint:#8792A6;  /* meta, placeholders, bijschriften */

  /* ---- Oppervlakken & tekst (Porselein) ---- */
  --bg:#E7EAF1;         /* app-achtergrond achter panelen */
  --panel:#FFFFFF;      /* sidebar, rail, kaarten */
  --panel-2:#F3F5FA;    /* zachte kaart / input-vlak */
  --chat:#F5F7FB;       /* chat-canvas */
  --ink:#171A21;        /* primaire tekst */
  --muted:#5A6172;      /* secundaire tekst */
  --faint:#656974;      /* tertiair / labels */
  --line:#DCE1EA;       /* randen */
  --line-2:#E7EBF2; /* zachte scheidingen */
  /* Rand van iets dat je bedient: invoerveld, selectievak, schakelaar.
     --line is bewust zacht voor scheidingslijnen, maar WCAG vraagt 3:1
     voor de omtrek van een bedienelement. Vandaar deze aparte trap. */
  --line-sterk:#91949A;

  /* ---- Team-identiteit (gelijk in beide thema's) ----
     Definitieve roster (Bart 22-07): 8 gezichten. Elk lid = één vaste kleur, overal.
     Bron van waarheid = merkmanual §08 (ensemblo-brand-manual.html). */
  --c-bart:#2547E6;     /* strateeg     · Kobalt     */
  --c-arnout:#FF6B4A;   /* SEO & GEO    · Koraal     */
  --c-evgeny:#12A594;   /* data         · Teal       */
  --c-katrina:#7A5AF8;  /* social       · Violet     */
  --c-patrick:#E0A315;  /* content      · Amber      */
  --c-boris:#D6409F;    /* PR & branding· Magenta    */
  --c-my:#0E9BD6;       /* advertising  · Hemelblauw */
  --c-anniek:#6E9A2E;   /* e-mail       · Mosgroen   */

  /* Deprecated — oude placeholder-namen (v0.1). Behouden als alias zodat
     bestaande prototypes blijven resolven; vervang bij refactor door de namen hierboven. */
  --c-lars:var(--c-arnout);      /* → Arnout (SEO & GEO) */
  --c-maarten:var(--c-patrick);  /* → Patrick (content)  */
  --c-robin:var(--c-katrina);    /* → Katrina (social)   */
  --c-niels:var(--c-evgeny);     /* → Evgeny (data)      */

  /* ---- Typografie ---- */
  --font-display:"Fraunces",Georgia,"Iowan Old Style",serif;      /* wordmark, koppen */
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* UI, body */
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;                /* labels, cijfers, code */

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px;
  --fs-19:19px; --fs-24:24px; --fs-32:32px; --fs-44:clamp(30px,5vw,44px);
  --lh-tight:1.15; --lh-body:1.5; --lh-loose:1.6;
  --tracking-label:.12em;   /* uppercase mono-labels */

  /* ---- Ruimte (4-basis) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:10px; --r-lg:13px; --r-xl:16px; --r-pill:999px;

  /* ---- Icoon ----
     Eén maat voor elk icoon: pijlen, provider-logo's, wat er ook bijkomt.
     Stond hiervoor als losse getallen door de code heen (16, 18, 8, 9 px en
     een tekstteken op 19px), en dat zie je: iconen die net niet even groot
     zijn lezen als slordig zonder dat je kunt aanwijzen waarom.
     Uitgezonderd zijn tegels (.koppel-logo, .ravatar) en het merkteken; dat
     zijn vlakken die een icoon dragen, geen iconen. */
  --icoon:18px;
  --icoon-lijn:2px;      /* streekdikte, zodat elk icoon even zwaar oogt */

  /* ---- Schaduw ---- */
  --shadow:0 14px 40px -22px rgba(20,30,70,.45);
  --shadow-sm:0 4px 14px -8px rgba(20,30,70,.35);

  /* ---- Z-index ---- */
  --z-rail:5; --z-top:10; --z-toast:50;

  /* ---- Beweging (v2.3) ----------------------------------------------
     Vier duren, meer niet. Elke duur heeft één taak, zodat je nooit hoeft
     te kiezen tussen 180 en 220 milliseconden.

     De maten komen niet uit de lucht: 150ms voor een kleurwissel en 200ms
     voor een knop is wat volwassen interfaces gebruiken (o.a. nango.dev,
     gemeten 2026-08-07). Indrukken moet sneller, want alles boven ongeveer
     100ms voelt niet meer als een reactie op jouw vinger maar als vertraging.

     Beweging is hier feedback, geen versiering: iets zakt in omdat je
     drukt, iets komt binnen omdat het nieuw is. Beweegt er iets zonder
     reden, dan hoort het eruit. */
  --dur-druk:90ms;       /* je drukt, het zakt in */
  --dur-hover:150ms;     /* kleur, rand, schaduw */
  --dur-paneel:300ms;    /* iets vouwt open of komt binnen */
  --dur-verhaal:600ms;   /* illustratie die iets uitlegt */

  --ease-uit:cubic-bezier(0,0,.2,1);      /* iets komt binnen en remt af */
  --ease-inuit:cubic-bezier(.4,0,.2,1);   /* iets wisselt van staat */
  --ease-land:cubic-bezier(.2,.7,.3,1);   /* iets landt, met een zweem veer */

  /* Hoeveel er beweegt. Per merk anders: zie bewegingssysteem-v1.md. */
  --druk:.97;            /* schaal tijdens indrukken */
  --til:-1px;            /* hoeveel iets optilt bij hover */
  --ring:2px;            /* dikte van de toetsenbord-focusring */
}

/* ===== DARK — Nachtstudio (OS-voorkeur) ===== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#C8F250;
    --brand-ink:#16171B;
    --brand-soft:#25301A;
    --accent:#6EE0FF;
    --accent-ink:#0E2833;
    --good:#7DE0A8;
    --good-soft:#18291F;
    --warn:#E8C34A;
    --warn-soft:#2A2413;
    --crit:#F0666B;
    --crit-soft:#2C1719;
    --good-tekst:#7DE0A8;
    --warn-tekst:#E8C34A;
    --crit-tekst:#F0666B;
    --brand-licht:#A8D93C;
    --accent-licht:#3FC4E8;
    --ink-licht:#3A3C44;
    --invers-sterk:#0D0E12;
    --invers-ink:#17191F;
    --invers-muted:#3A3C44;
    --invers-faint:#5A5C64;
    --bg:#0D0E12;
    --panel:#17191F;
    --panel-2:#1E2128;
    --chat:#121318;
    --ink:#EDE9E1;
    --muted:#A6A6A0;
    --faint:#828279;
    --line:#2A2C33;
    --line-2:#23252B;
    --line-sterk:#6A6E7A;
    --shadow:0 18px 46px -22px rgba(0,0,0,.7);
    --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);
  }
}

/* ===== Expliciete gebruikerskeuze (wint altijd) ===== */
:root[data-theme="dark"]{
  --brand:#C8F250;
  --brand-ink:#16171B;
  --brand-soft:#25301A;
  --accent:#6EE0FF;
  --accent-ink:#0E2833;
  --good:#7DE0A8;
  --good-soft:#18291F;
  --warn:#E8C34A;
  --warn-soft:#2A2413;
  --crit:#F0666B;
  --crit-soft:#2C1719;
  --good-tekst:#7DE0A8;
  --warn-tekst:#E8C34A;
  --crit-tekst:#F0666B;
  --brand-licht:#A8D93C;
  --accent-licht:#3FC4E8;
  --ink-licht:#3A3C44;
  --invers-sterk:#0D0E12;
  --invers-ink:#17191F;
  --invers-muted:#3A3C44;
  --invers-faint:#5A5C64;
  --bg:#0D0E12;
  --panel:#17191F;
  --panel-2:#1E2128;
  --chat:#121318;
  --ink:#EDE9E1;
  --muted:#A6A6A0;
  --faint:#828279;
  --line:#2A2C33;
  --line-2:#23252B;
  --line-sterk:#6A6E7A;
  --shadow:0 18px 46px -22px rgba(0,0,0,.7);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --brand:#2547E6;
  --brand-ink:#FFFFFF;
  --brand-soft:#EAEEFF;
  --accent:#FF6B4A;
  --accent-ink:#171A21;
  --good:#1F9E6E;
  --good-soft:#E5F5EE;
  --warn:#C98A12;
  --warn-soft:#FBF1DC;
  --crit:#E5484D;
  --crit-soft:#FBE9E9;
  --good-tekst:#177A55;
  --warn-tekst:#92650C;
  --crit-tekst:#C13439;
  --brand-licht:#5D77F0;
  --accent-licht:#FF8B6E;
  --ink-licht:#3A3F4D;
  --invers-sterk:#FFFFFF;
  --invers-ink:#D9E0FF;
  --invers-muted:#C7D2FF;
  --invers-faint:#8792A6;
  --bg:#E7EAF1;
  --panel:#FFFFFF;
  --panel-2:#F3F5FA;
  --chat:#F5F7FB;
  --ink:#171A21;
  --muted:#5A6172;
  --faint:#656974;
  --line:#DCE1EA;
  --line-2:#E7EBF2;
  --line-sterk:#91949A;
  --shadow:0 14px 40px -22px rgba(20,30,70,.45);
  --shadow-sm:0 4px 14px -8px rgba(20,30,70,.35);
}

/* Reduceer beweging waar gewenst */
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }