/* Design tokens — :root (dark) + html[data-theme=light]. Do not put layout here. */

/* ── CSS Variables ──────────────────────────────────────────────────── */
:root {
    color-scheme: dark;
    /* Neutral near-black (avoid navy/blue cast under sticky ticker header) */
    --bg-primary:    #05070c;
    --bg-surface:    rgba(0, 240, 255, 0.02);
    --bg-card:       rgba(0, 240, 255, 0.03);
    --bg-hover:      rgba(0, 240, 255, 0.06);
    --bg-sidebar:    #05070c;
    --bg-input:      rgba(0, 240, 255, 0.05);
    --bg-header:     rgba(5, 7, 12, 0.97);
    --bg-elevated:   #0d121b;
    --bg-secondary:  var(--bg-elevated);
    --bg-chart:      #0a0e17;
    --overlay-scrim: rgba(0, 0, 0, 0.55);

    --border:        rgba(0, 200, 255, 0.10);
    --border-active: rgba(0, 240, 255, 0.30);

    --text-primary:  #e8e8e8;
    --text-secondary: rgba(255, 255, 255, 0.60);
    --text-muted:    rgba(255, 255, 255, 0.40);

    --neon-cyan:     #00f0ff;
    --neon:          var(--neon-cyan);
    --cyan:          #00f0ff;
    --neon-violet:   #a855f7;
    --gain:          #4d9e6e;
    --loss:          #b05252;
    --blue:          #3b82f6;

    --glow-sm:       0 0 10px rgba(0, 240, 255, 0.06);
    --glow-md:       0 0 20px rgba(0, 240, 255, 0.10);
    --glow-lg:       0 0 40px rgba(0, 240, 255, 0.08);
    --accent-primary: #00f0ff;

    --font-sans:     ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:     ui-sans-serif, system-ui, sans-serif;
    --font-sherif:   ui-sans-serif, system-ui, sans-serif;

    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     16px;
    --radius-full:   9999px;

    --transition:    all 0.2s ease;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-primary:    #f4f6f8;
    --bg-surface:    #ffffff;
    --bg-card:       #ffffff;
    --bg-hover:      #e8ecf0;
    --bg-sidebar:    #eef1f4;
    --bg-input:      #e8ecf0;
    --bg-header:     rgba(255, 255, 255, 0.96);
    --bg-elevated:   #ffffff;
    --bg-secondary:  var(--bg-elevated);
    --bg-chart:      #ffffff;
    --overlay-scrim: rgba(15, 23, 42, 0.35);

    --border:        #d5dbe3;
    --border-active: #94a3b8;

    --text-primary:  #111827;
    --text-secondary:#374151;
    --text-muted:    #6b7280;

    --neon-cyan:     #0e7490;
    --neon:          var(--neon-cyan);
    --cyan:          #0e7490;
    --neon-violet:   #7c3aed;
    --gain:          #3d8b5c;
    --loss:          #b05252;
    --blue:          #2563eb;

    --glow-sm:       0 1px 2px rgba(15, 23, 42, 0.06);
    --glow-md:       0 2px 8px rgba(15, 23, 42, 0.08);
    --glow-lg:       0 8px 24px rgba(15, 23, 42, 0.08);
    --accent-primary: #0e7490;
}