/* ============================================================================
   ftInvstr design tokens — single source of truth.
   Mirrored at marketing/landing/src/tokens.css (keep the two in sync).
   Never hardcode colors elsewhere; reference var(--*) only.

   Themes:
     html[data-theme="dark"]  — Institutional dark (Bloomberg / hedge-fund)
     html[data-theme="light"] — Premium editorial light (Financial Times)
   ============================================================================ */

/* ── Theme-agnostic: typography, spacing, radius ─────────────────────────── */
:root {
  /* Type families */
  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* numbers, CAGR, prices */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand identity — fixed across BOTH themes (logo is out of scope; keep
     current brand colors). Use --brand-gradient for the logo mark only; do
     NOT use it for theme-driven UI accents (those are --accent below). */
  --brand-1: #5e72e4;
  --brand-2: #26d08a;
  --brand-gradient: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 140%);

  /* Type scale — 13/15/17/22/32/48 (no Tailwind 14/16 steps) */
  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-base: 17px;
  --fs-lg:   22px;
  --fs-xl:   32px;
  --fs-2xl:  48px;

  /* Spacing — 4/8/12/16/24/32/48/64 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius — 0/4/6/8/12 (no 14px SaaS radius) */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;
}

/* ── Theme A — Institutional dark (Bloomberg / hedge-fund) ───────────────── */
html[data-theme="dark"] {
  /* Pin native controls (select popups, scrollbars, date pickers) to the theme. */
  color-scheme: dark;
  /* Surfaces — neutral black/gray (no blue undertone) */
  --bg-primary:        #0A0A0C;  /* near-black */
  --bg-elevated:       #161619;  /* cards, modals */
  --bg-overlay:        #1F1F23;  /* separates data modules */
  --border:            #2C2C31;  /* hairlines, dividers */
  --border-strong:     #3C3C43;  /* hovered borders, focused inputs */

  /* Text — neutral, no blue tint */
  --text-primary:      #ECECEE;
  --text-secondary:    #9C9CA3;
  --text-muted:        #6C6C72;
  /* Legacy alias — some templates use --muted directly. Map to text-secondary
     so the text is readable, not invisible like an undefined var. */
  --muted:             #9C9CA3;

  /* Brand — muted gold primary; emerald positive-data accent */
  --accent:            #D4AF37;
  --accent-hover:      #B8962D;
  --accent-soft:       rgba(212,175,55,0.12);
  --positive-data:     #10B981;
  --positive-data-soft: rgba(16,185,129,0.12);

  /* Semantic */
  --success:           #10B981;
  --success-soft:      rgba(16,185,129,0.12);
  --danger:            #EF4444;
  --danger-soft:       rgba(239,68,68,0.12);
  --warning:           #F59E0B;
  --warning-soft:      rgba(245,158,11,0.12);
  --info:              #6BA6FF;

  /* Chart grid — faded; never use --border for chart gridlines (too strong) */
  --chart-grid:        rgba(255,255,255,0.06);
}

/* ── Theme B — Premium editorial light (Financial Times) ─────────────────── */
html[data-theme="light"] {
  /* Pin native controls (select popups, scrollbars, date pickers) to the theme. */
  color-scheme: light;
  /* Surfaces — warm alabaster default (alt: #F5F2EB editorial cream). No pure white bg. */
  --bg-primary:        #FBF9F6;
  --bg-elevated:       #FFFFFF;  /* card surface */
  --bg-overlay:        #F5F2EB;  /* editorial cream sub-sections */
  --border:            #E5E1D8;
  --border-strong:     #C9C2B3;

  /* Text — deep charcoal, not generic gray */
  --text-primary:      #111827;
  --text-secondary:    #4B5563;
  --text-muted:        #9CA3AF;
  /* Legacy alias — map --muted to text-secondary in light theme too. */
  --muted:             #4B5563;

  /* Brand — periwinkle (matches the logo; light/soft on alabaster, not heavy navy) */
  --accent:            #5E72E4;
  --accent-hover:      #4C5FD4;
  --accent-soft:       rgba(94,114,228,0.12);
  --accent-secondary:  #5B1425;
  --accent-secondary-soft: rgba(91,20,37,0.08);

  /* Semantic */
  --success:           #047857;
  --success-soft:      rgba(4,120,87,0.08);
  --danger:            #991B1B;
  --danger-soft:       rgba(153,27,27,0.08);
  --warning:           #92400E;
  --warning-soft:      rgba(146,64,14,0.10);
  --info:              #1D4ED8;

  /* Chart grid — faded for light theme */
  --chart-grid:        rgba(17,24,39,0.06);
}