/**
 * Design Tokens
 * Single source of truth for colors, spacing, radii.
 * Consume with var(--token-name); do not hardcode hex values in CSS or JS.
 * JS chart colors live in js/theme.js, mirroring these values.
 */
:root {
    color-scheme: dark;

    /* Surfaces */
    --color-bg-page: #030712;      /* gray-950 body */
    --color-bg-surface: #111827;   /* gray-900 card/row hover */
    --color-bg-raised: #1f2937;    /* gray-800 border / split */
    --color-bg-sunken: #0f172a;    /* slate-900 nested hover */

    /* Text */
    --color-text-primary: #e5e7eb;    /* gray-200 body emphasis, chart title */
    --color-text-body: #f3f4f6;       /* gray-100 base body */
    --color-text-secondary: #d1d5db;  /* gray-300 data labels */
    --color-text-muted: #9ca3af;      /* gray-400 axis labels, secondary */
    --color-text-dim: #6b7280;        /* gray-500 tertiary */
    --color-text-disabled: #4b5563;   /* gray-600 N/A, disabled */

    /* Lines */
    --color-border: #1f2937;       /* gray-800 */
    --color-border-strong: #374151; /* gray-700 axis lines */

    /* Accent */
    --color-accent: #60a5fa;       /* blue-400 tab active, link hover */
    --color-accent-strong: #3b82f6; /* blue-500 primary button */
    --color-accent-hover: #2563eb;  /* blue-600 button hover */

    /* Semantic status — chart cell fills */
    --color-best-bg: #065f46;      /* emerald-900 */
    --color-best-fg: #6ee7b7;      /* emerald-300 */
    --color-worst-bg: #450a0a;     /* red-950 */
    --color-worst-fg: #fca5a5;     /* red-300 */

    /* Badge palette */
    --color-sota-bg: #065f46;
    --color-sota-fg: #6ee7b7;
    --color-new-bg: #1e3a5f;
    --color-new-fg: #93c5fd;
    --color-proprietary-bg: #3b0764;
    --color-proprietary-fg: #d8b4fe;
    --color-open-weight-bg: #713f12;
    --color-open-weight-fg: #fde68a;
    --color-open-source-bg: #064e3b;
    --color-open-source-fg: #6ee7b7;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Radius scale */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 9999px;
}