/* ==========================================================================
   Ivanhoe Brugge — Design Tokens
   --------------------------------------------------------------------------
   Bron-van-waarheid voor kleuren, typografie, spacing, radius en shadow.
   Wordt VOOR site.css ingeladen, en VULT AAN op de bestaande site-vars
   (--text, --bg-card, --border, --accent, ...). Niets hier overruled die.
   --------------------------------------------------------------------------
   Donker thema: alleen de SOFT/FG-varianten worden bijgesteld zodat
   badges en chips voldoende contrast houden in dark mode.
   ========================================================================== */

:root {
    /* ── Status-kleuren — solid, soft (background) en fg (foreground) ───── */
    --c-success: #16a34a;  --c-success-soft: #dcfce7;  --c-success-fg: #166534;
    --c-warn:    #d97706;  --c-warn-soft:    #fef3c7;  --c-warn-fg:    #92400e;
    --c-danger:  #dc2626;  --c-danger-soft:  #fee2e2;  --c-danger-fg:  #991b1b;
    --c-info:    #2563eb;  --c-info-soft:    #dbeafe;  --c-info-fg:    #1e3a8a;
    --c-purple:  #9333ea;  --c-purple-soft:  #ede9fe;  --c-purple-fg:  #7c3aed;
    --c-cyan:    #0891b2;  --c-cyan-soft:    #cffafe;  --c-cyan-fg:    #155e75;
    --c-gold:    #ca8a04;  --c-gold-soft:    #fef9c3;  --c-gold-fg:    #854d0e;
    --c-teal:    #0f766e;  --c-teal-soft:    #ccfbf1;  --c-teal-fg:    #115e59;

    /* ── Typografie-schaal ──────────────────────────────────────────────── */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;

    --lh-tight: 1.2;
    --lh-normal: 1.5;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ── Spacing-schaal (8px-grid, met halve-stap voor fine-tuning) ─────── */
    --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;

    /* ── Border-radius ──────────────────────────────────────────────────── */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 99px;

    /* ── Shadow ─────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);
}

/* ── Donker thema — alleen soft/fg + zwaardere shadows ──────────────────── */
html[data-theme="dark"] {
    --c-success-soft: rgba(34, 197, 94, .15);   --c-success-fg: #4ade80;
    --c-warn-soft:    rgba(217, 119, 6, .15);   --c-warn-fg:    #fbbf24;
    --c-danger-soft:  rgba(220, 38, 38, .15);   --c-danger-fg:  #fca5a5;
    --c-info-soft:    rgba(37, 99, 235, .15);   --c-info-fg:    #93c5fd;
    --c-purple-soft:  rgba(147, 51, 234, .15);  --c-purple-fg:  #c4b5fd;
    --c-cyan-soft:    rgba(8, 145, 178, .15);   --c-cyan-fg:    #67e8f9;
    --c-gold-soft:    rgba(202, 138, 4, .15);   --c-gold-fg:    #fde047;
    --c-teal-soft:    rgba(15, 118, 110, .15);  --c-teal-fg:    #5eead4;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}