/* ==========================================================================
   Concrator Design System — Design Tokens
   ========================================================================== */

:root {
    /* Colors — Background */
    --color-bg: #0f1117;
    --color-surface: #1a1d27;
    --color-surface-hover: #222633;
    --color-border: #2d3148;

    /* Colors — Brand / Interactive (Tailwind indigo scale)
       Split into FILL vs TEXT so both pass WCAG 1.4.3 AA (4.5:1) on the dark theme:
         - fill tokens carry white text   -> need a DARK indigo (600/700)
         - text tokens sit ON the dark bg  -> need a LIGHT indigo (400/300)
       One token can't do both: white-on-#6366f1 = 4.47 and #6366f1-on-#0f1117 = 4.22
       both fail. Use --color-primary* for fills, --color-primary-text* for foreground. */
    --color-primary: #4f46e5;            /* indigo-600 — primary fill (buttons, accents with white text) */
    --color-primary-hover: #4338ca;      /* indigo-700 — primary fill, hover */
    --color-primary-text: #818cf8;       /* indigo-400 — primary as text / accent on dark surfaces */
    --color-primary-text-hover: #a5b4fc; /* indigo-300 — primary text / accent, hover */

    /* Colors — Semantic */
    --color-danger: #ef4444;
    --color-danger-hover: #f87171;
    --color-success: #22c55e;
    --color-warning: #fbbf24;

    /* Colors — Text */
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Typography — Monospace */
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* Spacing & Shape */
    --radius: 8px;
    --radius-sm: 4px;
    --sidebar-width: 240px;

    /* Effects */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}