/* Video Tool v3: tokens. Bron: 00-briefing/vormula-tokens.css (vormulastudio.nl).
   Alleen wat de app gebruikt, plus wat een app nodig heeft en een website niet
   (statuskleuren, focus, ruimteschaal, het 9:16-kader). Zie 01-ux/v3-spec.md 5.1. */

@font-face {
  font-family: 'Author';
  src: url('assets/Author-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

@layer tokens {
  :root {
    /* merk (letterlijk uit vormula-tokens.css) */
    --navy: #00335E;
    --primary: #178fcf;
    --ink: #00335E;
    --page: #F2F2F4;
    --muted: #6b7280;
    --w78: rgba(255, 255, 255, .78);
    --w50: rgba(255, 255, 255, .5);
    --w12: rgba(255, 255, 255, .12);
    --w08: rgba(255, 255, 255, .08);
    --w06: rgba(255, 255, 255, .05);

    /* app: extra vlakken en status */
    --navy-diep: #001F3A;          /* de ondergrond van de kopbalk en de vaste beslisbalk */
    --navy-licht: #0a4374;         /* een opgelicht vlak, bijvoorbeeld een actieve tegel */
    --w90: rgba(255, 255, 255, .92);
    --w62: rgba(255, 255, 255, .62);  /* kapjes en meta: boven de contrastgrens op navy */
    --w30: rgba(255, 255, 255, .3);
    --metem: #CC3311;              /* alleen logo en co-branding */
    --ok: #45c98a;                 /* --c-motion */
    --let: #f2b23c;                /* --c-visual */
    --fout: #ff6b6b;
    --primary-diep: #106fa3;
    --primary-knop: #106fa3;       /* vlak van de primaire knop: wit erop haalt 5,5:1; #178fcf blijft accent */
    --primary-knop-diep: #0d5f8c;
    --primary-zacht: rgba(23, 143, 207, .18);

    /* typografie */
    --font: 'Author', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --t-mono-label: 11px;
    --t-mono-knop: 12px;
    --t-mono-kolom: 12.5px;        /* kapjes: het maximum van de mono-schaal */
    --t-detail: 13px;              /* alleen niet-essentiele meta */
    --t-detail-ruim: 14px;         /* ondergrens knoplabels en UI-tekst */
    --t-body: 15px;
    --t-body-ruim: 16px;
    --t-lead: 17px;
    --t-kop-mini: 19px;
    --t-kop-kaart: 23px;
    --t-kop-groot: 28px;

    /* het hoekprofiel, groot-klein-groot-klein */
    --r-btn: 12px 4px 12px 4px;
    --r-card: 18px 6px 18px 6px;   /* de app-maat van het profiel op kaarten, zoals de huidige app hem afleidt */
    --r-tag: 8px 2px 8px 2px;
    --r-pill: 6px 2px 6px 2px;
    --r-frame: 22px 7px 22px 7px;

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

    /* maten */
    --maxw: 1368px;
    --kant: clamp(20px, 3vw, 40px);
    --kopbalk: 64px;
    /* breedte van het 9:16-kader op desktop: volgt de vensterhoogte, zodat kader plus
       pogingenstrook boven de beslisbalk passen (op 945 hoog ongeveer 265px) */
    --kader-b: clamp(220px, calc((100vh - 500px) * 9 / 16), 300px);

    /* beweging en focus */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --duur: 180ms;
    --focus: 0 0 0 2px var(--navy), 0 0 0 4px var(--primary);
  }
}