/* EquityVue v2 — Shared Design Tokens
   Stripe/Linear base + TradingView chart styling.
   Used by all pages. Import via: <link rel="stylesheet" href="_design.css">
*/

:root {
  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, Monaco, monospace;

  /* ── Light mode (default) ── */
  --bg:           #fafaf9;
  --surface:      #ffffff;
  --surface2:    #f5f5f4;
  --surface3:    #f0eeea;
  --border:      #e5e5e5;
  --border2:     #d4d4d4;
  --chart-grid:  #eeeeee;
  --text:        #0a0a0a;
  --text2:       #525252;
  --muted:       #737373;
  --muted2:      #a3a3a3;
  --gain:        #16a34a;
  --gain-bg:     #f0fdf4;
  --gain-border: #bbf7d0;
  --gain-text:   #15803d;
  --loss:        #dc2626;
  --loss-bg:     #fef2f2;
  --loss-border: #fecaca;
  --loss-text:   #b91c1c;
  --warn:        #b45309;
  --warn-bg:     #fffbeb;
  --warn-border: #fde68a;
  --warn-text:   #92400e;
  --accent:      #0a0a0a;
  --accent-fg:   #ffffff;

  /* ── Geometry ── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --ease:      150ms ease;
}

/* ── Dark mode — system preference (overridden by [data-theme] toggle) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0a0a0a;
    --surface:      #131313;
    --surface2:    #1a1a1a;
    --surface3:    #1f1f1f;
    --border:      #262626;
    --border2:     #333333;
    --chart-grid:  #1f1f1f;
    --text:        #fafafa;
    --text2:       #a3a3a3;
    --muted:       #737373;
    --muted2:      #525252;
    --gain:        #22c55e;
    --gain-bg:     #052e16;
    --gain-border: #14532d;
    --gain-text:   #4ade80;
    --loss:        #ef4444;
    --loss-bg:     #2c0b0e;
    --loss-border: #7f1d1d;
    --loss-text:   #fca5a5;
    --warn:        #f59e0b;
    --warn-bg:     #2c1810;
    --warn-border: #78350f;
    --warn-text:   #fbbf24;
    --accent:      #fafafa;
    --accent-fg:   #0a0a0a;
  }
}

/* ── Explicit overrides for the theme toggle button ── */
[data-theme="dark"] {
  --bg:           #0a0a0a;
  --surface:      #131313;
  --surface2:    #1a1a1a;
  --surface3:    #1f1f1f;
  --border:      #262626;
  --border2:     #333333;
  --chart-grid:  #1f1f1f;
  --text:        #fafafa;
  --text2:       #a3a3a3;
  --muted:       #737373;
  --muted2:      #525252;
  --gain:        #22c55e;
  --gain-bg:     #052e16;
  --gain-border: #14532d;
  --gain-text:   #4ade80;
  --loss:        #ef4444;
  --loss-bg:     #2c0b0e;
  --loss-border: #7f1d1d;
  --loss-text:   #fca5a5;
  --warn:        #f59e0b;
  --warn-bg:     #2c1810;
  --warn-border: #78350f;
  --warn-text:   #fbbf24;
  --accent:      #fafafa;
  --accent-fg:   #0a0a0a;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* ── Number formatting — use everywhere prices/percentages appear ── */
.num { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* ── Typography utilities ── */
.h1     { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.h2     { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.h3     { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.lead   { font-size: 16px; color: var(--text2); line-height: 1.55; }
.meta   { font-size: 11px; color: var(--muted2); letter-spacing: 0.04em; text-transform: uppercase; }
.caption{ font-size: 12px; color: var(--muted); }

/* ── Surfaces ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-flush { border-radius: 0; box-shadow: none; }
.divider { height: 1px; background: var(--border); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent; color: var(--text);
  cursor: pointer; transition: background var(--ease), border-color var(--ease), transform var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { border-color: var(--border); background: var(--surface); }
.btn-secondary:hover { border-color: var(--border2); background: var(--surface2); }
.btn-ghost:hover { background: var(--surface2); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 20px; font-size: 14px; }

/* ── Pills / Badges ── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--surface2); color: var(--text2); border: 1px solid var(--border);
}
.pill-gain  { background: var(--gain-bg); color: var(--gain-text); border-color: var(--gain-border); }
.pill-loss  { background: var(--loss-bg); color: var(--loss-text); border-color: var(--loss-border); }
.pill-warn  { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.pill-dot   { width: 6px; height: 6px; border-radius: 50%; }

/* ── Inputs ── */
input[type="text"], input[type="number"], input[type="email"], select, textarea {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 11px; font-size: 13px; font-family: inherit;
  outline: none; transition: border-color var(--ease), box-shadow var(--ease);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--text2);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus {
  box-shadow: 0 0 0 3px rgba(250,250,250,0.08);
}

/* ── Top nav ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em;
  text-decoration: none;
}
/* NOTE: .nav-logo was previously defined here as a 22x22 monogram badge.
   That rule was the root cause of Bug A — it constrained the .nav-logo
   link to 22px width on stock/leaderboard/screener/markets pages where
   .nav-logo is the wordmark, not a badge. Per-page .nav-logo styles in
   each HTML file now own this class. */
.nav-links { display: flex; gap: 20px; }
.nav-links a {
  color: var(--text2); text-decoration: none; font-size: 13px;
  transition: color var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* ── Market-mood pill (homepage hero) ── */
.mood-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; color: var(--text2);
}
.mood-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.mood-pill .dot.bull   { background: var(--gain); }
.mood-pill .dot.steady { background: var(--muted); }
.mood-pill .dot.bear   { background: var(--warn); }
.mood-pill .dot.crisis { background: var(--loss); }
.mood-pill strong { color: var(--text); font-weight: 500; }

/* ── TradingView-style chart chrome ── */
.chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.chart-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.chart-ohlc {
  display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text2); font-feature-settings: 'tnum';
}
.chart-ohlc-label { color: var(--muted); }
.chart-periods { display: flex; gap: 2px; }
.chart-periods button {
  background: transparent; color: var(--muted2);
  border: none; padding: 4px 9px; border-radius: var(--radius-sm);
  font-size: 11px; cursor: pointer; font-family: inherit;
  transition: background var(--ease), color var(--ease);
}
.chart-periods button:hover { background: var(--surface3); color: var(--text2); }
.chart-periods button.active { background: var(--accent); color: var(--accent-fg); }

.chart-indicators-bar {
  display: flex; gap: 0; padding: 8px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); font-feature-settings: 'tnum';
}
.chart-indicators-bar span { padding-right: 14px; }
.chart-indicators-bar .val { color: var(--text); }
.chart-indicators-bar .gain { color: var(--gain); }
.chart-indicators-bar .loss { color: var(--loss); }
.chart-indicators-bar .warn { color: var(--warn); }

/* ── Stat row (4-col metric strip) ── */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat-cell { background: var(--surface); padding: 12px 14px; }
.stat-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.stat-value { font-size: 14px; font-weight: 500; color: var(--text); font-family: var(--font-mono); font-feature-settings: 'tnum'; }

/* ── Breakout banner (gain-styled callout) ── */
.callout {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--gain-border); background: var(--gain-bg);
}
.callout-icon {
  width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--gain); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.callout-body { flex: 1; }
.callout-title { font-size: 13px; font-weight: 500; color: var(--gain-text); }
.callout-sub { font-size: 12px; color: var(--gain-text); opacity: 0.85; margin-top: 1px; }

/* ── Ticker tape (live scrolling breakouts) ── */
.ticker-tape {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono); font-size: 11px;
  height: 32px; display: flex; align-items: center;
}
.ticker-track {
  display: flex; gap: 28px;
  animation: ticker-scroll 60s linear infinite;
  white-space: nowrap; padding-left: 100%;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { color: var(--text2); }
.ticker-item .sym { color: var(--text); font-weight: 500; }
.ticker-item .ch { font-feature-settings: 'tnum'; }
.ticker-item .gain { color: var(--gain); }
.ticker-item .loss { color: var(--loss); }
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ── Theme toggle button ── */
.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  width: 30px; height: 30px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text2); transition: all var(--ease);
}
.theme-toggle:hover { background: var(--surface2); color: var(--text); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .nav { padding: 10px 16px; }
  .nav-links { display: none; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .h1 { font-size: 28px; }
}

/* ── Utility classes ── */
.gain-text { color: var(--gain); }
.loss-text { color: var(--loss); }
.warn-text { color: var(--warn); }
.muted-text { color: var(--muted); }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }