/* ============================================================
   LMS FC — DESIGN TOKENS
   Single source of truth for colours, spacing, radii, shadows,
   typography, transitions, and component primitives.
============================================================ */

:root {
    /* --------------------------------------------------------
       COLOURS — Backgrounds
    -------------------------------------------------------- */
    --color-bg-main: #020617; /* page background */
    --color-bg-surface: #0f172a; /* panels, headers */
    --color-bg-card: #1e293b; /* cards, boxes */
    --color-bg-card-alt: #1e1f22; /* darker card variant */
    /* --------------------------------------------------------
       COLOURS — Borders
    -------------------------------------------------------- */
    --color-border-light: rgba(255,255,255,0.08);
    --color-border-dark: #334155;
    /* --------------------------------------------------------
       COLOURS — Text
    -------------------------------------------------------- */
    --color-text-primary: #ffffff;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #aaa;
    /* --------------------------------------------------------
       COLOURS — Brand / Accent
    -------------------------------------------------------- */
    --color-accent: #0ea5e9;
    --color-accent-hover: #0284c7;
    /* --------------------------------------------------------
       COLOURS — Status
    -------------------------------------------------------- */
    --color-success: #22c55e;
    --color-warning: #fbbf24;
    --color-danger: #ef4444;
    --color-info: #38bdf8;
    --color-deadline: #f97316;
    --color-unpicked: #a78bfa;
    /* --------------------------------------------------------
       SPACING SCALE (4px baseline)
    -------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    /* --------------------------------------------------------
       RADII
    -------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    /* --------------------------------------------------------
       SHADOWS
    -------------------------------------------------------- */
    --shadow-card: 0 0 20px rgba(0,0,0,0.4);
    /* --------------------------------------------------------
       TYPOGRAPHY
    -------------------------------------------------------- */
    --font-family-base: system-ui, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    /* --------------------------------------------------------
       TRANSITIONS
    -------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.4s ease;
    /* --------------------------------------------------------
       HEADER HEIGHT
    -------------------------------------------------------- */
    --header-height: 72px;
}