/* ════════════════════════════════════════════════════════════
   TRMNL 303 — Design Tokens
   The complete design language as CSS custom properties.
   ════════════════════════════════════════════════════════════ */

:root {
    /* ── Backgrounds (3 elevation levels) ── */
    --bg-canvas:    #0A0E14;
    --bg-surface:   #111820;
    --bg-elevated:  #1A2230;

    /* Legacy aliases (for backward compat during migration) */
    --bg-primary:   var(--bg-canvas);
    --bg-secondary: var(--bg-surface);
    --bg-card:      var(--bg-surface);

    /* ── Text (3 levels — strict hierarchy) ── */
    --text-primary:   #E8E8E8;
    --text-secondary: #8B95A5;
    --text-muted:     #4A5568;

    /* ── Accent (cyan owns the UI) ── */
    --accent:       #00D4D8;
    --accent-dim:   rgba(0, 212, 216, 0.125);
    --accent-hover: rgba(0, 212, 216, 0.25);
    --accent-glow:  rgba(0, 212, 216, 0.4);

    /* Legacy aliases */
    --neon-cyan:    var(--accent);
    --neon-green:   var(--bullish);
    --neon-purple:  #8b5cf6;
    --neon-pink:    #ec4899;
    --neon-orange:  #ff6b00;

    /* ── Semantic (only for data — never decoration) ── */
    --bullish:      #00E676;
    --bearish:      #FF5252;
    --warning:      #FFD740;
    --neutral:      #8B95A5;

    /* Semantic with opacity */
    --bullish-dim:  rgba(0, 230, 118, 0.12);
    --bearish-dim:  rgba(255, 82, 82, 0.12);
    --warning-dim:  rgba(255, 215, 64, 0.12);
    --neutral-dim:  rgba(139, 149, 165, 0.12);

    /* Legacy aliases */
    --success:      var(--bullish);
    --danger:       var(--bearish);

    /* ── Chart overlay series palette (indicators, drawings) ── */
    --series-1: var(--accent);
    --series-2: #8b5cf6;
    --series-3: var(--warning);
    --series-4: #ec4899;
    --series-5: #38bdf8;
    --series-6: #f97316;

    /* ── Borders ── */
    --border-default: #1E2A3A;
    --border-active:  rgba(0, 212, 216, 0.25);

    /* Legacy alias */
    --border-color: var(--border-default);

    /* ── Typography ── */
    --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
    --font-sans: 'IBM Plex Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;

    /* Type scale (rem-based) */
    --text-xs:   0.70rem;
    --text-sm:   0.80rem;
    --text-base: 0.90rem;
    --text-md:   1.00rem;
    --text-lg:   1.25rem;
    --text-xl:   1.50rem;
    --text-2xl:  2.00rem;

    /* ── Spacing (4px base unit) ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;

    /* ── Layout ── */
    --sidebar-width:      220px;
    --sidebar-collapsed:  56px;
    --chat-width:         320px;
    --max-content:        1440px;
    --gutter:             24px;
    --header-height:      0px; /* No top header in new design */

    /* ── Component tokens ── */
    --card-radius:   8px;
    --card-padding:  var(--space-md);
    --btn-radius:    6px;
    --pill-radius:   4px;

    /* ── Transitions ── */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-slow:    400ms ease;

    /* ── Z-index scale ── */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-sidebar:   500;
    --z-overlay:   900;
    --z-drawer:    1000;
    --z-modal:     1100;
    --z-toast:     1200;
}