/* ═══════════════════════════════════════════════════════════════════════════
   SLATE — semi-light. The reading room between Meridian and Axiom.
   ───────────────────────────────────────────────────────────────────────────
   ROLLBACK: Admin → Settings → Interface theme → "Classic (gold)".
   Like the other layers this only redefines app.css tokens — no template edits.

   WHY A THIRD GROUND EXISTS
   A pure-white interface is punishing for anyone reading dense tables for long
   stretches — the glare fatigues, and every card edge has to fight #FFF to be
   seen at all. Slate drops the ground to a soft graphite-sage and lets cards
   rise to near-white. Contrast comes from elevation rather than brightness, so
   panels separate cleanly without a single heavy border.

   This is the ground most trading desks and terminals actually settle on, and
   it is the one to pick if your members work with the Signal Desk and the
   portfolio tables for more than a minute at a time.

   SAME RULE AS THE OTHERS
     --gold  → Ledger Teal   interface — never money
     --teal  → Gain green    "up", exclusively
     --rose  → Loss red      "down", exclusively
     --ember → Burnt amber   streaks, XP, energy
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: light;

  /* ── Semantic channels ───────────────────────────────────────────────── */
  --brand: #0A6E75;
  --up:    #0E7048;
  --down:  #A83744;
  --ember: #A65F17;

  /* ── Legacy token remap ──────────────────────────────────────────────── */
  --gold:       #0A6E75;
  --gold-light: #0E8A93;
  --gold-dark:  #06474C;
  --gold-muted: rgba(10,110,117,.11);

  --teal:       #0E7048;
  --teal-muted: rgba(14,112,72,.12);
  --rose:       #A83744;
  --purple:     #524A9E;

  /* ── Grounds — the ground recedes, cards rise. Contrast by elevation,
        not by brightness. ─────────────────────────────────────────────── */
  --bg-void:     #DDE3DF;   /* furthest back — the desk surface */
  --bg-deep:     #E2E7E4;
  --bg-surface:  #E7ECE9;
  --bg-card:     #F4F7F5;   /* panels lift toward white, never reach it */
  --bg-elevated: #D5DDD8;
  --bg-hover:    #CBD5CF;

  /* ── Text — slightly softer than Meridian's ink; on a grey ground pure
        near-black reads harsh. ────────────────────────────────────────── */
  --text-primary:   #16211F;
  --text-secondary: #4C5956;
  --text-muted:     #78847F;
  --text-gold:      #0A6E75;

  /* ── Rules — a mid ground needs firmer edges than white does ─────────── */
  --border:        rgba(22,33,31,.17);
  --border-subtle: rgba(22,33,31,.10);
  --border-bright: rgba(10,110,117,.45);

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --gradient-gold: linear-gradient(135deg, #0A6E75 0%, #0E8A93 100%);
  --gradient-dark: linear-gradient(180deg, #E2E7E4 0%, #DDE3DF 100%);
  --gradient-card: linear-gradient(135deg, rgba(10,110,117,.07) 0%, rgba(10,110,117,.02) 100%);
  --gradient-hero: linear-gradient(135deg, #F4F7F5 0%, #E7ECE9 55%, #DDE3DF 100%);

  /* ── Shadows do real work here: they are what lifts a card off the desk. */
  --shadow-card: 0 1px 1px rgba(22,33,31,.06), 0 4px 14px rgba(22,33,31,.075);
  --shadow-gold: 0 6px 22px rgba(10,110,117,.20);
  --shadow-lg:   0 18px 46px rgba(22,33,31,.18);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIONS — app.css was authored dark-first
   ═══════════════════════════════════════════════════════════════════════════ */

body::before { opacity: .18; }   /* grain barely present on a mid ground */
h1, h2, h3, h4, h5, h6 { letter-spacing: -.022em; }

.stat-value, .kpi-value, .lb-xp, .ticker-value, .sd-pulse-value,
.dash-kpi-value, .dash-kpi-mini, .daily-score-num, .sd-sector-pct,
.sd-row-pct, .table td { font-variant-numeric: tabular-nums; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-gold { background: var(--brand); color: #FFFFFF; border-color: transparent; }
.btn-gold:hover { background: var(--gold-light); color: #FFFFFF; }
.btn-outline { border-color: var(--border); color: var(--text-primary); background: var(--bg-card); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--gold-muted); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Semantic separation ─────────────────────────────────────────────── */
.streak-chip {
  color: var(--ember);
  background: rgba(166,95,23,.12);
  border-color: rgba(166,95,23,.32);
}
.streak-chip:hover { background: rgba(166,95,23,.18); color: var(--ember); border-color: rgba(166,95,23,.48); }
.streak-chip.is-cold { color: var(--text-muted); background: transparent; border-color: var(--border-subtle); }

.xp-bar-fill, .xp-pop { background: linear-gradient(135deg, var(--ember) 0%, #C4762A 100%); }
.xp-pop { color: #FFFFFF; }
.daily-dot.is-done    { background: var(--ember); }
.daily-dot.is-current { background: var(--ember); box-shadow: 0 0 10px rgba(166,95,23,.45); }
.trophy.is-earned     { border-color: rgba(166,95,23,.42); }
.lb-xp                { color: var(--ember); }
.daily-score-num      { color: var(--ember); }
.daily-score-ring     { background: conic-gradient(var(--ember) calc(var(--pct) * 1%), var(--bg-elevated) 0); }

.heat-cell    { background: var(--bg-elevated); }
.heat-cell.l1 { background: rgba(166,95,23,.24); }
.heat-cell.l2 { background: rgba(166,95,23,.47); }
.heat-cell.l3 { background: rgba(166,95,23,.72); }
.heat-cell.l4 { background: var(--ember); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge-gold   { background: var(--gold-muted);     color: var(--brand); }
.badge-teal   { background: var(--teal-muted);     color: var(--up); }
.badge-rose   { background: rgba(168,55,68,.12);   color: var(--down); }
.badge-purple { background: rgba(82,74,158,.12);   color: var(--purple); }
.badge-gray   { background: var(--bg-elevated);    color: var(--text-secondary); }

/* ── Surfaces — chrome sits slightly ABOVE the desk, panels above that ── */
.navbar        { background: rgba(244,247,245,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.ticker-bar    { background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.page-loader   { background: var(--bg-void); }
.admin-sidebar { background: var(--bg-surface); border-right: 1px solid var(--border); }
.admin-topbar  { background: rgba(244,247,245,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.admin-page    { background: var(--bg-void); }
.footer        { background: var(--bg-elevated); border-top: 1px solid var(--border); }
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.dropdown-item:hover { background: var(--bg-hover); }
.modal         { background: var(--bg-card); border: 1px solid var(--border); }
.modal-overlay { background: rgba(22,33,31,.42); backdrop-filter: blur(5px); }

.card, .content-card, .quiz-card, .stat-card, .event-card,
.daily-card, .predict-card, .sd-card, .dash-card, .auth-card, .table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control { background: #FFFFFF; border: 1px solid var(--border); color: var(--text-primary); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--gold-muted); outline: none; }
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-secondary); }

/* ── Tables — zebra earns its keep on a mid ground ───────────────────── */
.table thead th { background: var(--bg-elevated); color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.table tbody tr { border-bottom: 1px solid var(--border-subtle); }
.table tbody tr:hover { background: var(--bg-hover); }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert-success { background: var(--teal-muted);     border-color: rgba(14,112,72,.32);  color: var(--up); }
.alert-error   { background: rgba(168,55,68,.10);   border-color: rgba(168,55,68,.32);  color: var(--down); }
.alert-info    { background: var(--gold-muted);     border-color: rgba(10,110,117,.30); color: var(--brand); }

/* ── Market colour stays strictly semantic ───────────────────────────── */
.ticker-change.up   { color: var(--up); }
.ticker-change.down { color: var(--down); }

/* ── Signal Desk ─────────────────────────────────────────────────────── */
.sd-head             { border-bottom: 2px solid var(--brand); }
.sd-sector-bar.up    { background: var(--up); }
.sd-sector-bar.down  { background: var(--down); }
.sd-sector-track     { background: var(--bg-elevated); }
.sd-breadth-seg.up,  .sentiment-seg.bull, .sd-vote-seg.bull { background: var(--up); }
.sd-breadth-seg.down,.sentiment-seg.bear, .sd-vote-seg.bear { background: var(--down); }
.sd-breadth-seg, .sentiment-seg, .sd-vote-seg { color: #FFFFFF; }
.sd-breadth-seg.flat { background: var(--bg-elevated); }
.sd-answer  { border-left-color: var(--brand); }
.sd-arch    { background: var(--bg-card); }
.sd-chip    { background: var(--bg-card); }

/* ── Predictions ─────────────────────────────────────────────────────── */
.predict-btn { background: var(--bg-card); }
.predict-btn.bull:hover:not(:disabled), .predict-btn.bull.is-chosen {
  border-color: var(--up); background: var(--teal-muted); color: var(--up);
}
.predict-btn.bear:hover:not(:disabled), .predict-btn.bear.is-chosen {
  border-color: var(--down); background: rgba(168,55,68,.10); color: var(--down);
}

/* ── Daily 5 ─────────────────────────────────────────────────────────── */
.daily-opt             { background: #FFFFFF; border: 1px solid var(--border); }
.daily-opt:hover:not(:disabled) { border-color: var(--brand); background: var(--gold-muted); }
.daily-opt.is-selected { border-color: var(--brand); background: var(--gold-muted); }
.daily-opt.is-selected .daily-opt-key { background: var(--brand); color: #FFF; border-color: var(--brand); }
.daily-opt.is-correct  { border-color: var(--up);   background: var(--teal-muted); }
.daily-opt.is-correct .daily-opt-key  { background: var(--up); color: #FFF; border-color: var(--up); }
.daily-opt.is-wrong    { border-color: var(--down); background: rgba(168,55,68,.10); }
.daily-opt.is-wrong .daily-opt-key    { background: var(--down); color: #FFF; border-color: var(--down); }
.daily-opt-key         { background: var(--bg-elevated); }
.daily-timer           { background: var(--bg-card); }
.daily-timer.is-warning{ color: var(--ember); border-color: rgba(166,95,23,.5); }
.daily-timer.is-danger { color: var(--down);  border-color: var(--down); }

/* ── Dashboards ──────────────────────────────────────────────────────── */
.dash-funnel-bar      { background: linear-gradient(90deg, rgba(10,110,117,.35), var(--brand)); }
.dash-funnel-track    { background: var(--bg-elevated); }
.dash-health-item     { background: var(--bg-card); }
.dash-health-dot.ok   { background: var(--up);    box-shadow: 0 0 8px rgba(14,112,72,.45); }
.dash-health-dot.warn { background: var(--ember); box-shadow: 0 0 8px rgba(166,95,23,.45); }
.dash-attention           { background: var(--bg-card); border-left-color: var(--ember); }
.dash-attention.is-urgent { border-left-color: var(--down); }
.dash-feature         { background: var(--bg-card); }
.dash-feature:hover   { border-color: var(--border-bright); }

/* ── Leaderboard ─────────────────────────────────────────────────────── */
.lb-row       { background: var(--bg-card); }
.lb-row.is-me { border-color: var(--brand); background: var(--gold-muted); }

/* ── Hero / auth ─────────────────────────────────────────────────────── */
.hero, .auth-page { background: var(--gradient-hero); }
.hero-orb { opacity: .26; filter: blur(75px); }

/* ── Prose ───────────────────────────────────────────────────────────── */
.prose a { color: var(--brand); text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--brand); color: var(--text-secondary); }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb { background: rgba(22,33,31,.28); }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ── Focus ───────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}