/* ══════════════════════════════════════════════════════════════
   Design Tokens — 3-tier: primitive → semantic → component
   ══════════════════════════════════════════════════════════════ */

/* ── Primitives (never reference directly in components) ── */
:root {
    /* Grays */
    --gray-950: #0d1117;
    --gray-900: #161b22;
    --gray-850: #1c2333;
    --gray-800: #21262d;
    --gray-700: #30363d;
    --gray-600: #3d444d;
    --gray-500: #6e7681;
    --gray-400: #8b949e;
    --gray-200: #e6edf3;

    /* Colors */
    --green-500: #3fb950;
    --green-600: #238636;
    --green-700: #2ea043;
    --red-500: #f85149;
    --red-600: #da3633;
    --blue-500: #58a6ff;
    --orange-500: #d29922;
    --purple-500: #bc8cff;
    --cyan-500: #39d2c0;

    /* Asset colors */
    --color-btc: #f7931a;
    --color-spy: #627eea;
    --color-bond: #8b949e;
    --color-gold: #FFD700;
}

/* ── Semantic aliases (use these in components) ── */
:root {
    --bg: var(--gray-950);
    --bg-card: var(--gray-900);
    --bg-hover: var(--gray-850);
    --border: var(--gray-700);

    --text: var(--gray-200);
    --text2: var(--gray-400);
    --text3: var(--gray-500);

    --green: var(--green-500);
    --red: var(--red-500);
    --blue: var(--blue-500);
    --orange: var(--orange-500);
    --purple: var(--purple-500);
    --cyan: var(--cyan-500);

    /* Legacy aliases (backwards compat) */
    --btc: var(--color-btc);
    --spy: var(--color-spy);
    --bond: var(--color-bond);
    --gold: var(--color-gold);
}

/* ── Component tokens ── */
:root {
    /* Layout */
    --sidebar-w: 220px;
    --sidebar-w-collapsed: 56px;
    --ops-w: 260px;
    --ops-w-collapsed: 0px;
    --container-max: 1400px;

    /* Typography */
    --font-family: 'Inter', -apple-system, sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 11px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: .12s;
    --transition-base: .15s;
    --transition-slow: .25s;

    /* Shadows */
    --shadow-glow-green: 0 0 6px var(--green);
    --shadow-glow-red: 0 0 6px var(--red);
    --shadow-glow-orange: 0 0 6px var(--orange);
    --shadow-dropdown: 0 8px 32px rgba(0,0,0,.4);
}