/* core/lib/ui/site-tokens.css — HET stijlcontract van een site.
 *
 * Eén woordenlijst die blokken, widgetskins, mail en chrome allemaal
 * lezen. Zie docs/site-style-contract.md voor het waarom; dit bestand is
 * de afspraak zelf.
 *
 * DRIE DINGEN OM TE WETEN
 *
 * 0. NIET ALLES IN DEZE LIJST WORDT GELEZEN. Zestien tokens zijn
 *    vandaag afspraak-zonder-gebruiker: geen enkele skin, blok of site
 *    vraagt ze op (gemeten 2026-09-29 over core + alle subsites). Ze
 *    staan gemarkeerd met NOG GEEN LEZERS. Dat is geen dood hout —
 *    de redenering eronder klopt nog steeds, en de dag dat iemand het
 *    ritme wél gaat lezen hoeft hij het niet opnieuw te bedenken.
 *
 *    Wat het WEL betekent: een skin mag er niet op rekenen. Schrijf
 *    altijd `var(--shadow-md, <eigen waarde>)`. Een token zonder
 *    waarde maakt de hele declaratie ongeldig en de opmaak verdwijnt
 *    zonder foutmelding — zo hing de chatknop weken als kale button
 *    onder aan elke pagina. Zie docs/site-style-contract.md §16-17.
 *
 *    Hertellen:
 *      grep -rl 'var(--<token>' core/{lib,widgets,cms,dashboard} subsites/
 *
 * 1. Dit zijn STANDAARDEN, geen voorschriften, en daarom staat alles
 *    hieronder in @layer site-defaults. Ongelaagde CSS wint van
 *    gelaagde, dus de eigen stylesheet van een site verslaat deze
 *    waarden ALTIJD — ook als hij eerder in de <head> staat.
 *
 *    Dat "ook als" is de hele reden. Op een beheerde pagina laadt
 *    core zijn eigen links ná de head van de site, en toen dit bestand
 *    nog ongelaagd was overschreef het daar het palet van probalist met
 *    de neutrale standaarden. Zichtbaar zodra je het sjabloon uitzette:
 *    witte knop op een witte achtergrond, contrastverhouding 1.0.
 *    Met een sjabloon aan viel het niet op, want dat laadt als laatste
 *    en zette het weer recht.
 *
 *    Let op het verschil met blocks.css, dat juist NIET in een laag
 *    staat: dit zijn standaarden die moeten verliezen, dat zijn regels
 *    die van een sitereset moeten winnen. Twee tegengestelde eisen,
 *    twee tegengestelde keuzes.
 *
 * 2. Elke standaard is THEMA-VEILIG. Ze komen uit currentColor en em,
 *    dus een site die niets invult krijgt iets leesbaars in plaats van
 *    grijs-op-grijs. Dat was de fout van `var(--accent, currentColor)`
 *    in blocks.css: een fallback die niets zegt is erger dan geen.
 *
 * 3. De namen volgen shadcn/ui waar die passen — background, foreground,
 *    primary, muted, border. Niet uit navolging maar omdat elke
 *    frontender en elk model ze kent, en een AI die een skin schrijft
 *    `--foreground` beter raadt dan `--text`. Wat shadcn niet heeft
 *    (letters, ritme, beweging) heeft hier een eigen naam.
 *
 * Kleuren staan als kleuren. shadcn bewaart losse HSL-getallen zonder
 * hsl() eromheen omdat Tailwind dat wil; dat is een Tailwind-conventie
 * en geen verbetering.
 */

@layer site-defaults {

:root {
  /* ── Vlakken en tekst ──────────────────────────────────────────── */
  --background:          Canvas;
  --foreground:          CanvasText;
  --card:                color-mix(in srgb, currentColor 4%, transparent);
  --card-foreground:     currentColor;
  --muted:               color-mix(in srgb, currentColor 8%, transparent);
  --muted-foreground:    color-mix(in srgb, currentColor 62%, transparent);

  /* ── Lijnen ────────────────────────────────────────────────────── */
  --border:              color-mix(in srgb, currentColor 18%, transparent);
  --border-strong:       color-mix(in srgb, currentColor 34%, transparent);
  --input:               var(--border);
  --ring:                color-mix(in srgb, currentColor 40%, transparent);

  /* ── Accent ────────────────────────────────────────────────────────
   * Een site die hier niets zet krijgt bewust GEEN kleur, maar wel
   * contrast: een donker vlak met lichte tekst leest als een knop en
   * niet als een vergeten instelling. currentColor als accentvlak is
   * precies wat probalist onzichtbaar maakte. */
  --primary:             color-mix(in srgb, currentColor 86%, transparent);
  --primary-foreground:  Canvas;
  --secondary:           color-mix(in srgb, currentColor 10%, transparent);
  --secondary-foreground: currentColor;
  /* De TWEEDE merkkleur. Niet hetzelfde als --primary, en dat is geen
   * detail: sites schrijven verlopen tussen hun twee merkkleuren, en
   * een linear-gradient met twee gelijke stops is een vlak. Wie hier
   * niets zet krijgt een warmere variant van --primary — een verloop
   * dus, geen vlak. */
  --accent:              color-mix(in srgb, currentColor 62%, transparent);
  --accent-foreground:   Canvas;
  --destructive:         #c0392b;
  --destructive-foreground: #fff;

  /* ── Letters ───────────────────────────────────────────────────────
   * `inherit` en niet een lettertypenaam: erven pakt wat de site op
   * <body> heeft staan, dus het klopt vanzelf op een site die nooit van
   * dit bestand gehoord heeft. */
  --font-heading:        inherit;
  --font-body:           inherit;
  --font-mono:           ui-monospace, SFMono-Regular, Menlo, monospace;   /* NOG GEEN LEZERS */

  /* ── Typeschaal ────────────────────────────────────────────────────
   * In em, dus relatief aan wat de site al instelt. clamp() voor de
   * koppen omdat een vaste rem-maat op een telefoon altijd te groot of
   * op een breed scherm altijd te klein is. */
  /* Gemeten waarden, niet bedachte. Dit zijn precies de maten die
   * blocks.css al voerde; door ze hier te zetten en daar te lezen kan
   * een sjabloon de VERHOUDINGEN verzetten en niet alleen de kleur.
   * Zonder die stap was het hele schaalblok een dode woordenlijst:
   * gedeclareerd, door niemand gelezen. */
  --scale-h1:            clamp(1.75rem, 5vw, 2.9rem);
  --scale-h2:            clamp(1.4rem, 3.4vw, 2rem);
  --scale-h3:            1.05rem;
  /* h1..h3 leest blocks.css; deze drie nog niet — NOG GEEN LEZERS */
  --scale-h4:            1em;
  --scale-body:          1em;
  --scale-small:         .875em;

  /* ── Vorm ──────────────────────────────────────────────────────── */
  --radius:              12px;
  --radius-sm:           calc(var(--radius) / 2);    /* NOG GEEN LEZERS */
  --radius-lg:           calc(var(--radius) * 1.6);  /* core/chat */
  --radius-pill:         999px;                      /* NOG GEEN LEZERS */
  --border-width:        1px;                        /* NOG GEEN LEZERS */

  /* ── Ritme ─── NOG GEEN LEZERS ─────────────────────────────────────
   * Eén reeks in plaats van 109 losse maten. Wie --space-3 zet,
   * verschuift alles mee.
   *
   * De rekensom klopt nog: probalist voert 258 ruimte-declaraties met
   * 64 verschillende maten, ayni 242 met 44. Alleen leest niemand deze
   * zes, en zolang dat zo is verzet een sjabloon wél de kleur maar niet
   * het ritme. Invoeren = die ~250 declaraties omschrijven; dat is een
   * eigen klus met eigen toets, geen bijvangst van een kleuromslag. */
  --space-1:             .375rem;
  --space-2:             .75rem;
  --space-3:             1.25rem;
  --space-4:             2rem;
  --space-5:             3.25rem;
  --space-6:             5rem;

  /* ── Diepte ────────────────────────────────────────────────────── */
  --shadow-sm:           0 1px 2px color-mix(in srgb, currentColor 12%, transparent);
  --shadow-md:           0 8px 28px -12px color-mix(in srgb, currentColor 40%, transparent);

  /* ── Beweging ─── NOG GEEN LEZERS ──────────────────────────────────
   * Zelfde verhaal als het ritme: probalist heeft 8 verschillende
   * transitieduren, ayni 4, en geen van beide leest deze drie. De
   * reduced-motion-regel onderaan werkt dus ook nog niet. */
  --motion-fast:         .15s;
  --motion-slow:         .4s;
  --motion-ease:         cubic-bezier(.4, 0, .2, 1);
}

/* Wie beweging heeft uitgezet, krijgt het contract zonder de reis.
   Eén plek, zodat geen enkele widget dit zelf hoeft te onthouden. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; --motion-slow: 0s; }
}

} /* @layer site-defaults */