/* ============================================================================
   Alvoru Design Tokens v0.1
   Bron: docs/design-system/TOKENS.md (goedgekeurd 2026-04-19)
   Beleid: behouden, niet herontwerpen — elke waarde komt uit audit van
           bestaande website + dashboard CSS.
   ============================================================================ */

:root {
  /* ── BACKGROUNDS ─────────────────────────────────────────────────────── */
  --bg-primary: #0a0a0f;             /* default body/page bg */
  --bg-deep: #03030a;                /* hero-secties / dramatic page-bg */
  --bg-secondary: #111118;            /* iets lichter; cards/secties */
  --bg-elevated: rgba(255,255,255,0.03);  /* glassmorphism panel-bg */
  --bg-input: rgba(255,255,255,0.04);     /* form-velden, hover-bg */

  /* ── BORDERS ─────────────────────────────────────────────────────────── */
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.1);

  /* ── BRAND ───────────────────────────────────────────────────────────── */
  --primary: #6366f1;                /* CLAUDE.md canonical */
  --primary-hover: #818cf8;          /* lichter voor hover-states */
  --primary-light: #a5b4fc;          /* tekst op donkere primary-bg */
  --primary-dark: #4f46e5;           /* darker variant (button hover) */
  --violet: #8b5cf6;                 /* CLAUDE.md secondary */
  --violet-light: #c4b5fd;
  --cyan: #06b6d4;                   /* CLAUDE.md tertiary */

  /* Primary tints (alpha-overlays op --primary) */
  --primary-tint-05: rgba(99,102,241,0.05);
  --primary-tint-08: rgba(99,102,241,0.08);
  --primary-tint-10: rgba(99,102,241,0.1);
  --primary-tint-12: rgba(99,102,241,0.12);
  --primary-tint-20: rgba(99,102,241,0.2);
  --primary-tint-25: rgba(99,102,241,0.25);
  --primary-tint-30: rgba(99,102,241,0.3);
  --primary-tint-40: rgba(99,102,241,0.4);

  /* ── TEXT ────────────────────────────────────────────────────────────── */
  --text-primary: #f1f5f9;            /* hoofdtekst op donker */
  --text-on-dark: #ffffff;            /* pure wit (headings/buttons) */
  --text-secondary: #cbd5e1;          /* iets gedimd */
  --text-muted: #94a3b8;              /* CLAUDE.md-stijl muted */
  --text-subtle: #64748b;             /* metadata / placeholders */
  --text-metadata: #8b96a8;           /* datums, footer-copy (legal-pages) */
  --text-emphasis: #e2e8f0;           /* <strong> op donkere bg */
  --accent-blue: #c7d2fe;             /* light-indigo accent (h3, box-text, table th) */

  /* ── SEMANTIC ────────────────────────────────────────────────────────── */
  --success: #10b981;
  --success-light: #6ee7b7;
  --success-bg: rgba(16,185,129,0.1);
  --success-bg-strong: rgba(16,185,129,0.15);
  --success-border: rgba(16,185,129,0.3);

  --warning: #f59e0b;
  --warning-light: #fcd34d;
  --warning-bg: rgba(245,158,11,0.1);
  --warning-bg-strong: rgba(245,158,11,0.3);
  --warning-border: rgba(245,158,11,0.3);

  --error: #ef4444;
  --error-light: #fca5a5;
  --error-bg: rgba(239,68,68,0.1);
  --error-bg-strong: rgba(239,68,68,0.15);
  --error-border: rgba(239,68,68,0.3);

  --info: var(--cyan);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;

  --fs-xs:   0.6875rem;  /* 11px — badges, micro-labels */
  --fs-sm:   0.75rem;    /* 12px — secundaire tekst, hints */
  --fs-base: 0.875rem;   /* 14px — body, default */
  --fs-md:   1rem;       /* 16px — form inputs */
  --fs-lg:   1.25rem;    /* 20px — section headings */
  --fs-xl:   1.5rem;     /* 24px — card titles, h3 */
  --fs-2xl:  1.75rem;    /* 28px — h2 */
  --fs-3xl:  2.25rem;    /* 36px — h1, hero */

  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;   /* alleen voor hero/display, niet body-bold */

  --lh-tight:   1;
  --lh-snug:    1.4;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  /* ── SPACING (4px-scale + 14px bridge voor v0.1) ─────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-3-5:  14px;   /* bridge — meest-gebruikte waarde, snap → sp-4 in v1.0 */
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-9:    36px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-15:   60px;
  --sp-20:   80px;
  --sp-25:   100px;

  /* ── BORDER-RADIUS ───────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;       /* default card-radius */
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-full: 9999px;     /* pills (alleen 50% bij 1:1 cirkels zoals avatars) */

  /* ── SHADOWS ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.6), 0 4px 6px rgba(0,0,0,.3);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-glow-primary: 0 0 24px rgba(99,102,241,0.4);
  --shadow-glow-violet:  0 0 24px rgba(139,92,246,0.4);
  --shadow-focus: 0 0 0 3px rgba(99,102,241,.1);
}