/* tokens.css - design-tokens (SINGLE SOURCE OF TRUTH voor kleur/ruimte/typografie).
 * Gegenereerd door create-app als design-fundament. THEMA PER APP: pas hieronder de
 * kleur-tokens aan de huisstijl van de klant aan; de rest (ruimte/typografie/vorm) blijft.
 * Componenten in style.css gebruiken uitsluitend deze variabelen. Zie ai-docs/design-system.md.
 * Default hier: een neutrale, zakelijke blauw/leisteen-basis, licht + donker.
 */
:root {
  /* Kleur - licht */
  --bg: #eef2f7;
  --bg-tint: radial-gradient(1200px 600px at 15% -10%, #e6ecf5 0%, rgba(230,236,245,0) 60%),
             radial-gradient(1000px 700px at 110% 10%, #e9eef6 0%, rgba(233,238,246,0) 55%);
  --surface: #ffffff;
  --surface-alt: #f2f5fa;
  --surface-hover: #eef2f7;
  --border: #e2e7ef;
  --border-strong: #ccd5e2;

  --text: #142032;
  --text-muted: #56647a;
  --text-subtle: #808ea3;

  --brand: #1b3a5b;      /* koppen / wordmark */
  --brand-strong: #142c46;
  --accent: #2563eb;     /* interactief accent - pas dit aan de huisstijl aan */
  --accent-hover: #1d54c9;
  --accent-press: #1846ac;
  --accent-contrast: #ffffff;
  --accent-soft: #e7eefe;

  --success: #12805c;
  --success-soft: #e1f5ee;
  --warning: #9a6712;
  --warning-soft: #fbf1de;
  --danger: #cc3b31;
  --danger-soft: #fdece9;

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.30);

  --shadow-1: 0 1px 2px rgba(20, 32, 50, 0.06), 0 1px 3px rgba(20, 32, 50, 0.09);
  --shadow-2: 0 8px 24px rgba(20, 32, 50, 0.10), 0 2px 6px rgba(20, 32, 50, 0.06);
  --shadow-3: 0 20px 48px rgba(20, 32, 50, 0.20);

  --r-1: 9px;
  --r-2: 13px;
  --r-3: 18px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --fs-xs: 12.5px; --fs-sm: 14px; --fs-base: 15.5px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --lh: 1.55; --lh-tight: 1.25;

  --topbar-h: 62px;
  --content-max: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1220;
    --bg-tint: radial-gradient(1200px 600px at 15% -10%, #12213a 0%, rgba(18,33,58,0) 60%),
               radial-gradient(1000px 700px at 110% 10%, #101a2d 0%, rgba(16,26,45,0) 55%);
    --surface: #111d2f;
    --surface-alt: #16243b;
    --surface-hover: #1b2b45;
    --border: #243650;
    --border-strong: #32476780;

    --text: #e9eff8;
    --text-muted: #a4b4cb;
    --text-subtle: #74869f;

    --brand: #cfe0f5;
    --brand-strong: #e9f1fb;
    --accent: #5b8dff;
    --accent-hover: #78a1ff;
    --accent-press: #4a7ef0;
    --accent-contrast: #08121f;
    --accent-soft: rgba(91, 141, 255, 0.15);

    --success: #46c191; --success-soft: rgba(70, 193, 145, 0.14);
    --warning: #e0aa4e; --warning-soft: rgba(224, 170, 78, 0.14);
    --danger: #f2837b;  --danger-soft: rgba(242, 131, 123, 0.14);

    --focus-ring: 0 0 0 3px rgba(91, 141, 255, 0.35);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 24px 56px rgba(0, 0, 0, 0.60);
  }
}