/* ═══════════════════════════════════════════════════════════════════════════
   F-INTEL QUANTITATIVE TERMINAL — DESIGN TOKENS & THEME
   Inspired by Zerodha Kite & Sensibull: flat, readable, professional.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── DARK THEME (IV Surface Terminal Style) ── */
:root,
[data-theme="dark"] {
    /* Surfaces */
    --bg-canvas:      #131722;
    --bg-surface:     #1e222d;
    --bg-card:        #1e222d;
    --bg-card-hover:  #252a38;
    --bg-input:       #131722;

    /* Borders */
    --border-subtle:  #2a2e39;
    --border-card:    #363c4e;
    --border-focus:   #00e5ff;

    /* Accent (Electric Cyan from IV Surface Terminal) */
    --accent:         #00e5ff;
    --accent-dim:     rgba(0, 229, 255, 0.12);
    --accent-light:   #33ebff;
    --accent-cyan:    #00e5ff;

    /* Financial semantic */
    --color-bullish:      #00e676;
    --color-bullish-dim:  rgba(0, 230, 118, 0.12);
    --color-bearish:      #ff3366;
    --color-bearish-dim:  rgba(255, 51, 102, 0.12);
    --color-warning:      #ffd54f;
    --color-warning-dim:  rgba(255, 213, 79, 0.12);
    --color-neutral:      #78909c;

    /* Text */
    --text-primary:   #d1d4dc;
    --text-secondary: #868993;
    --text-muted:     #555d6b;
    --text-inverse:   #131722;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Shadows — sleek terminal elevation */
    --shadow-card:   0 1px 4px rgba(0, 0, 0, 0.35);
    --shadow-soft:   0 2px 8px rgba(0, 0, 0, 0.25);

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 6px;

    /* Transitions */
    --transition-fast:   120ms ease;
    --transition-smooth: 200ms ease;
}

/* ── LIGHT THEME (Day Mode) ── */
[data-theme="light"] {
    /* Surfaces */
    --bg-canvas:      #f0f3fa;
    --bg-surface:     #ffffff;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f5f7fc;
    --bg-input:       #f0f3fa;

    /* Borders */
    --border-subtle:  #e0e3eb;
    --border-card:    #d1d5e0;
    --border-focus:   #2962ff;

    /* Accent stays same */
    --accent:         #2962ff;
    --accent-dim:     rgba(41, 98, 255, 0.08);
    --accent-light:   #4c7fff;

    /* Financial semantic */
    --color-bullish:      #00897b;
    --color-bullish-dim:  rgba(0, 137, 123, 0.08);
    --color-bearish:      #e53935;
    --color-bearish-dim:  rgba(229, 57, 53, 0.08);
    --color-warning:      #f57c00;
    --color-warning-dim:  rgba(245, 124, 0, 0.08);
    --color-neutral:      #78909c;

    /* Text */
    --text-primary:   #131722;
    --text-secondary: #4a5568;
    --text-muted:     #8896a5;
    --text-inverse:   #ffffff;

    /* Shadows */
    --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-soft:   0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── Base Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* ── Flat Card (replaces glassmorphism) ── */
.glass-panel,
.card,
.ge-card,
.ge-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast);
}

.glass-panel:hover,
.card:hover {
    border-color: var(--border-focus);
}

/* ── Monospace numeric utility ── */
.num-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Status indicator (compact, no glow) ── */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
}

.status-indicator.live {
    border-color: var(--color-bullish);
    color: var(--color-bullish);
    background: var(--color-bullish-dim);
}

.status-indicator .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: statusPulse 2.5s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ── Bull / Bear color utilities ── */
.bull  { color: var(--color-bullish) !important; }
.bear  { color: var(--color-bearish) !important; }
.warn  { color: var(--color-warning) !important; }
.muted { color: var(--text-muted)   !important; }
.accent-text { color: var(--accent) !important; }

/* ── Real-Time Broker Tick Flash Micro-Animations ── */
.flash-up {
    animation: tickFlashGreen 350ms ease forwards;
}
.flash-down {
    animation: tickFlashRed 350ms ease forwards;
}

@keyframes tickFlashGreen {
    0%   { background-color: rgba(38, 166, 154, 0.45); color: #00ffc4; }
    100% { background-color: transparent; }
}

@keyframes tickFlashRed {
    0%   { background-color: rgba(239, 83, 80, 0.45); color: #ff5252; }
    100% { background-color: transparent; }
}