/* ═══════════════════════════════════════════════════════════════════════════
   ticker-themes.css  —  CSS custom properties for the ticker page
   
   Structure:
     :root                               — Dark theme (default; live until toggled)
     html[data-theme="light"]            — Explicit light mode
     @media prefers-color-scheme: light
       html[data-theme="system"]         — OS-following light mode

   All color usage in ticker.css references var(--ts-*) from this file.
   Bump ASSET_VERSION in config.php when shipping changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ──────────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --ts-bg:           #0a0e27;    /* page body */
    --ts-bg-panel:     #0f172a;    /* cards, dropdowns, panels */
    --ts-bg-surface:   #1e293b;    /* sidebar, elevated items, subtle dividers */
    --ts-bg-raised:    #1e2d3d;    /* slightly-raised panels */
    --ts-bg-hover:     #1e3a5f;    /* hover / selected state */
    --ts-bg-blue-dim:  #1e3a5f;    /* dim blue background */
    --ts-bg-green-deep:#052e16;    /* deep green background */

    /* Borders */
    --ts-border:       #334155;    /* standard dividers, outlines */
    --ts-border-faint: #1e293b;    /* very subtle borders (same as surface) */

    /* Text */
    --ts-text:         #f1f5f9;    /* primary text */
    --ts-text-bright:  #e2e8f0;    /* slightly dimmer primary text */
    --ts-text-sub:     #cbd5e1;    /* subheadings, secondary text */
    --ts-text-muted:   #94a3b8;    /* labels, placeholders, light prose */
    --ts-text-faint:   #475569;    /* very faint/disabled text */

    /* Accent — cyan */
    --ts-accent:       #22d3ee;
    --ts-accent-rgb:   34, 211, 238;   /* used in rgba(var(--ts-accent-rgb), α) */
    --ts-accent-dim:   #164e63;    /* bg behind accent highlights */
    --ts-accent-light: #67e8f9;    /* lighter cyan */

    /* Green — positive / gain */
    --ts-green:        #10b981;
    --ts-green-dark:   #059669;
    --ts-green-bright: #34d399;
    --ts-green-hi:     #86efac;    /* highlight-level green text */
    --ts-green-dim:    #065f46;    /* bg behind green badges */
    --ts-green-rgb:    16, 185, 129;

    /* Red — negative / loss */
    --ts-red:          #ef4444;
    --ts-red-dark:     #b91c1c;
    --ts-red-hi:       #fca5a5;    /* highlight-level red text */
    --ts-red-dim:      #7f1d1d;    /* bg behind red badges */
    --ts-red-rgb:      239, 68, 68;

    /* Amber / yellow */
    --ts-amber:        #f59e0b;
    --ts-amber-bright: #fbbf24;
    --ts-amber-rgb:    245, 158, 11;

    /* Blue */
    --ts-blue:         #3b82f6;
    --ts-blue-dark:    #2563eb;
    --ts-blue-hi:      #93c5fd;    /* highlight-level blue text */
    --ts-blue-mid:     #2d5a8e;    /* mid-depth blue panel */
    --ts-blue-deep:    #3d5270;    /* deep blue panel */

    /* Teal */
    --ts-teal:         #06b6d4;

    /* Yellow-green */
    --ts-lime:         #22c55e;

    /* Brand — purple gradient start */
    --ts-brand:        #667eea;

    /* Shadows / overlays */
    --ts-shadow:       rgba(0, 0, 0, 0.4);
    --ts-shadow-heavy: rgba(0, 0, 0, 0.6);
    --ts-overlay:      rgba(0, 0, 0, 0.55);

    /* Sky tones (MCP key, score tab TICKERSCORE label) */
    --ts-sky:          #38bdf8;
    --ts-sky-muted:    #7dd3fc;
    --ts-sky-dim:      #bae6fd;
    --ts-sky-deep:     #0e7490;
    --ts-sky-bg:       #f0fdff;

    /* Deep blue panels (price target, score-tab, info-panel) */
    --ts-bg-darkest:   #020617;
    --ts-bg-deep-blue: #0f1f2e;
    --ts-bg-blue-border: #1e3a52;
    --ts-bg-blue-panel: #1e4060;
    --ts-bg-blue-hover: #1e40af;

    /* Amber deep (pipeline badge) */
    --ts-bg-amber-deep:  #451a03;
    --ts-bg-amber-hover: #78350f;
    --ts-amber-border:   #d97706;

    /* Violet accent */
    --ts-violet:       #a78bfa;
    --ts-brand-hover:  #5a67d8;

    /* Score tab — TICKERSCORE tab special colours */
    --ts-tab-overall-bg:           #162032;
    --ts-tab-overall-active:       #0d1b2e;
    --ts-tab-hover:                #243447;

    /* Recommendation badges */
    --ts-badge-buy-bg:        #052e16;
    --ts-badge-buy-border:    #16a34a;
    --ts-badge-buy-text:      #4ade80;
    --ts-badge-hold-bg:       #1c1917;
    --ts-badge-hold-border:   #78716c;
    --ts-badge-hold-text:     #d6d3d1;
    --ts-badge-sell-bg:       #2d1a0e;
    --ts-badge-sell-border:   #b45309;
    --ts-badge-strong-sell-bg: #2d0a0a;

    /* Entry / signal badge text tones */
    --ts-entry-good-text:  #6ee7b7;
    --ts-entry-wait-text:  #fcd34d;
    --ts-entry-sell-light: #f87171;

    /* Toggle / email prefs */
    --ts-toggle-on-bg:  #0e3d26;
}

/* ── Explicit light theme ──────────────────────────────────────────────── */
html[data-theme="light"] {
    /* Backgrounds */
    --ts-bg:           #f0f4f8;
    --ts-bg-panel:     #ffffff;
    --ts-bg-surface:   #e2e8f0;
    --ts-bg-raised:    #dce4ed;
    --ts-bg-hover:     #bfdbfe;
    --ts-bg-blue-dim:  #dbeafe;
    --ts-bg-green-deep:#dcfce7;

    /* Borders */
    --ts-border:       #cbd5e1;
    --ts-border-faint: #e2e8f0;

    /* Text */
    --ts-text:         #0f172a;
    --ts-text-bright:  #1e293b;
    --ts-text-sub:     #334155;
    --ts-text-muted:   #64748b;
    --ts-text-faint:   #94a3b8;

    /* Accent — sky blue (cyan is too saturated on white) */
    --ts-accent:       #0284c7;
    --ts-accent-rgb:   2, 132, 199;
    --ts-accent-dim:   #e0f2fe;
    --ts-accent-light: #38bdf8;

    /* Green */
    --ts-green:        #059669;
    --ts-green-dark:   #047857;
    --ts-green-bright: #10b981;
    --ts-green-hi:     #065f46;
    --ts-green-dim:    #dcfce7;
    --ts-green-rgb:    5, 150, 105;

    /* Red */
    --ts-red:          #dc2626;
    --ts-red-dark:     #b91c1c;
    --ts-red-hi:       #7f1d1d;
    --ts-red-dim:      #fee2e2;
    --ts-red-rgb:      220, 38, 38;

    /* Amber */
    --ts-amber:        #d97706;
    --ts-amber-bright: #f59e0b;
    --ts-amber-rgb:    217, 119, 6;

    /* Blue */
    --ts-blue:         #2563eb;
    --ts-blue-dark:    #1d4ed8;
    --ts-blue-hi:      #1e40af;
    --ts-blue-mid:     #bfdbfe;
    --ts-blue-deep:    #dbeafe;

    /* Teal */
    --ts-teal:         #0891b2;

    /* Yellow-green */
    --ts-lime:         #16a34a;

    /* Brand — purple (same, readable on light bg) */
    --ts-brand:        #667eea;

    /* Shadows / overlays */
    --ts-shadow:       rgba(0, 0, 0, 0.12);
    --ts-shadow-heavy: rgba(0, 0, 0, 0.25);
    --ts-overlay:      rgba(0, 0, 0, 0.2);

    /* Sky tones */
    --ts-sky:          #0284c7;
    --ts-sky-muted:    #0369a1;
    --ts-sky-dim:      #bae6fd;
    --ts-sky-deep:     #0369a1;
    --ts-sky-bg:       #f0f9ff;

    /* Deep/dark panels — become light panels */
    --ts-bg-darkest:   #f8fafc;
    --ts-bg-deep-blue: #eff6ff;
    --ts-bg-blue-border: #bfdbfe;
    --ts-bg-blue-panel: #dbeafe;
    --ts-bg-blue-hover: #bfdbfe;

    /* Amber deep */
    --ts-bg-amber-deep:  #fffbeb;
    --ts-bg-amber-hover: #fef3c7;
    --ts-amber-border:   #d97706;

    /* Violet */
    --ts-violet:       #7c3aed;
    --ts-brand-hover:  #4f46e5;

    /* Score tab — TICKERSCORE tab */
    --ts-tab-overall-bg:           #eff6ff;
    --ts-tab-overall-active:       #dbeafe;
    --ts-tab-hover:                #e2e8f0;

    /* Recommendation badges */
    --ts-badge-buy-bg:        #dcfce7;
    --ts-badge-buy-border:    #16a34a;
    --ts-badge-buy-text:      #14532d;
    --ts-badge-hold-bg:       #f5f5f4;
    --ts-badge-hold-border:   #a8a29e;
    --ts-badge-hold-text:     #44403c;
    --ts-badge-sell-bg:       #fffbeb;
    --ts-badge-sell-border:   #d97706;
    --ts-badge-strong-sell-bg: #fee2e2;

    /* Entry / signal badge text */
    --ts-entry-good-text:  #047857;
    --ts-entry-wait-text:  #b45309;
    --ts-entry-sell-light: #dc2626;

    /* Toggle */
    --ts-toggle-on-bg:  #dcfce7;
}

/* ── System preference: light ──────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        /* Backgrounds */
        --ts-bg:           #f0f4f8;
        --ts-bg-panel:     #ffffff;
        --ts-bg-surface:   #e2e8f0;
        --ts-bg-raised:    #dce4ed;
        --ts-bg-hover:     #bfdbfe;
        --ts-bg-blue-dim:  #dbeafe;
        --ts-bg-green-deep:#dcfce7;

        /* Borders */
        --ts-border:       #cbd5e1;
        --ts-border-faint: #e2e8f0;

        /* Text */
        --ts-text:         #0f172a;
        --ts-text-bright:  #1e293b;
        --ts-text-sub:     #334155;
        --ts-text-muted:   #64748b;
        --ts-text-faint:   #94a3b8;

        /* Accent */
        --ts-accent:       #0284c7;
        --ts-accent-rgb:   2, 132, 199;
        --ts-accent-dim:   #e0f2fe;
        --ts-accent-light: #38bdf8;

        /* Green */
        --ts-green:        #059669;
        --ts-green-dark:   #047857;
        --ts-green-bright: #10b981;
        --ts-green-hi:     #065f46;
        --ts-green-dim:    #dcfce7;
        --ts-green-rgb:    5, 150, 105;

        /* Red */
        --ts-red:          #dc2626;
        --ts-red-dark:     #b91c1c;
        --ts-red-hi:       #7f1d1d;
        --ts-red-dim:      #fee2e2;
        --ts-red-rgb:      220, 38, 38;

        /* Amber */
        --ts-amber:        #d97706;
        --ts-amber-bright: #f59e0b;
        --ts-amber-rgb:    217, 119, 6;

        /* Blue */
        --ts-blue:         #2563eb;
        --ts-blue-dark:    #1d4ed8;
        --ts-blue-hi:      #1e40af;
        --ts-blue-mid:     #bfdbfe;
        --ts-blue-deep:    #dbeafe;

        /* Teal */
        --ts-teal:         #0891b2;

        /* Yellow-green */
        --ts-lime:         #16a34a;

        /* Brand */
        --ts-brand:        #667eea;

        /* Shadows */
        --ts-shadow:       rgba(0, 0, 0, 0.12);
        --ts-shadow-heavy: rgba(0, 0, 0, 0.25);
        --ts-overlay:      rgba(0, 0, 0, 0.2);

        /* Sky tones */
        --ts-sky:          #0284c7;
        --ts-sky-muted:    #0369a1;
        --ts-sky-dim:      #bae6fd;
        --ts-sky-deep:     #0369a1;
        --ts-sky-bg:       #f0f9ff;

        /* Deep panels */
        --ts-bg-darkest:   #f8fafc;
        --ts-bg-deep-blue: #eff6ff;
        --ts-bg-blue-border: #bfdbfe;
        --ts-bg-blue-panel: #dbeafe;
        --ts-bg-blue-hover: #bfdbfe;

        /* Amber deep */
        --ts-bg-amber-deep:  #fffbeb;
        --ts-bg-amber-hover: #fef3c7;
        --ts-amber-border:   #d97706;

        /* Violet */
        --ts-violet:       #7c3aed;
        --ts-brand-hover:  #4f46e5;

        /* Score tab — TICKERSCORE */
        --ts-tab-overall-bg:           #eff6ff;
        --ts-tab-overall-active:       #dbeafe;
        --ts-tab-hover:                #e2e8f0;

        /* Recommendation badges */
        --ts-badge-buy-bg:        #dcfce7;
        --ts-badge-buy-border:    #16a34a;
        --ts-badge-buy-text:      #14532d;
        --ts-badge-hold-bg:       #f5f5f4;
        --ts-badge-hold-border:   #a8a29e;
        --ts-badge-hold-text:     #44403c;
        --ts-badge-sell-bg:       #fffbeb;
        --ts-badge-sell-border:   #d97706;
        --ts-badge-strong-sell-bg: #fee2e2;

        /* Entry / signal badge text */
        --ts-entry-good-text:  #047857;
        --ts-entry-wait-text:  #b45309;
        --ts-entry-sell-light: #dc2626;

        /* Toggle */
        --ts-toggle-on-bg:  #dcfce7;
    }
}