/* ============================================================================
   FUNDS BENCHMARK — Design System (Phase A: Tokens + Primitives)

   Source of truth: funds-benchmark-design-system/project/
   Loaded AFTER fundbenchmark.css so these tokens win the cascade and the
   legacy page-level stylesheets inherit the new foundation automatically.

   Layer structure:
     1. Google Font imports (Montserrat / DM Sans / JetBrains Mono)
     2. Design-system tokens — the canonical var names (--bg, --surface,
        --text, --accent, --pos, --neg, --sp-*, --r-*, --dur, --ease, etc.)
     3. Legacy var aliases — the old fb-theme vars (--fd-*, --ff-*, --fc-*,
        --fa-*, --fb-*) now point at design-system equivalents. Existing
        class rules inherit new colours/fonts/radii without edits.
     4. Motion keyframes (pulse, slide, grow, fade, sheetup, tick…)
     5. Base element styles (body font-variant-numeric, headings, .eyebrow,
        .stat-hero, .pos, .neg, .gold, .mono, .isin)
     6. Primitive component utility classes (.fb-btn, .fb-badge, .fb-pill,
        .fb-chip, .fb-fund-card, .fb-stat, .fb-skeleton-line)
   ============================================================================ */

/* ── 1. Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 2. Design-system tokens (DARK = native) ─────────────────────────── */
:root,
:root[data-theme="dark"] {
  /* Raw tonal ladder — obsidian → ivory, warm neutral */
  --fb-obsidian:  #0a0a0b;
  --fb-charcoal:  #141416;
  --fb-graphite:  #1c1c1f;
  --fb-slate:     #2a2a2f;
  --fb-pewter:    #4a4a52;
  --fb-silver:    #8a8a94;
  --fb-platinum:  #c4c4cc;
  --fb-ivory:     #f4f4f6;
  --fb-white:     #ffffff;

  /* Antique gold — the only accent */
  --fb-gold:       #c9a962;
  --fb-gold-light: #e4d4a4;
  --fb-gold-dark:  #a68b3d;
  --fb-gold-15:    rgba(201, 169, 98, 0.15);
  --fb-gold-08:    rgba(201, 169, 98, 0.08);

  /* Institutional status colours */
  --fb-success: #4ade80;
  --fb-error:   #f87171;
  --fb-warning: #fbbf24;
  --fb-info:    #60a5fa;

  /* Comparison palette (2-5 fund overlays) */
  --fb-cmp-1: #c9a962;
  --fb-cmp-2: #60a5fa;
  --fb-cmp-3: #a78bfa;
  --fb-cmp-4: #4ade80;
  --fb-cmp-5: #f472b6;

  /* Sector palette (matches iOS FMP data palette) */
  --fb-sector-tech:     #60a5fa;
  --fb-sector-health:   #4ade80;
  --fb-sector-fin:      #c9a962;
  --fb-sector-cons-cyc: #f472b6;
  --fb-sector-comm:     #a78bfa;
  --fb-sector-ind:      #fb923c;
  --fb-sector-cons-def: #22d3ee;
  --fb-sector-energy:   #f87171;
  --fb-sector-util:     #a3e635;
  --fb-sector-real:     #fbbf24;
  --fb-sector-mat:      #8b5cf6;

  /* Semantic tokens — use these in components, not the raw palette */
  --bg:          var(--fb-obsidian);
  --surface:     var(--fb-charcoal);
  --surface-2:   var(--fb-graphite);
  --border:      var(--fb-slate);
  --border-soft: rgba(42, 42, 47, 0.5);

  --text:       var(--fb-ivory);
  --text-2:     var(--fb-platinum);
  --text-muted: var(--fb-silver);
  --text-dim:   var(--fb-pewter);

  --accent:      var(--fb-gold);
  --accent-ink:  var(--fb-obsidian);
  --accent-soft: var(--fb-gold-15);

  --gold:       var(--fb-gold);
  --gold-light: var(--fb-gold-light);
  --gold-dark:  var(--fb-gold-dark);
  --gold-15:    var(--fb-gold-15);
  --gold-08:    var(--fb-gold-08);

  --pos: var(--fb-success);
  --neg: var(--fb-error);

  /* Shadow scale */
  --shadow-card:     0 2px 8px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-hub-glow: 0 0 40px rgba(201, 169, 98, 0.15);
  --shadow-sheet:    0 -20px 60px rgba(0, 0, 0, 0.6);
  --shadow-cta-gold: 0 6px 18px rgba(201,169,98,0.25), 0 2px 6px rgba(201,169,98,0.15);

  /* Typography */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  --fs-hero:    32px;
  --fs-h1:      24px;
  --fs-h2:      18px;
  --fs-h3:      14px;
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-micro:   10px;
  --fs-stat-sm: 13px;
  --fs-stat-md: 22px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.5;

  --tracking-eyebrow: 0.12em;
  --tracking-display: -0.01em;
  --tracking-tight:   -0.015em;

  /* Spacing (4-pt grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --gutter-mobile: 24px;
  --gutter:        36px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-card: 14px;
  --r-xl:   18px;
  --r-pill: 9999px;

  /* Motion */
  --dur-fast: 0.12s;
  --dur:      0.18s;
  --dur-slow: 0.35s;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2b. LIGHT mode — warm cream, clean inversion ────────────────────── */
[data-theme="light"] {
  --fb-obsidian: #f8f8fa;
  --fb-charcoal: #ffffff;
  --fb-graphite: #f0f0f4;
  --fb-slate:    #e0e0e6;
  --fb-pewter:   #9a9aa4;
  --fb-silver:   #6a6a74;
  --fb-platinum: #3a3a44;
  --fb-ivory:    #1a1a1e;

  --bg:          var(--fb-obsidian);
  --surface:     var(--fb-charcoal);
  --surface-2:   var(--fb-graphite);
  --border:      var(--fb-slate);
  --border-soft: rgba(224, 224, 230, 0.5);

  --text:       var(--fb-ivory);
  --text-2:     var(--fb-platinum);
  --text-muted: var(--fb-silver);
  --text-dim:   var(--fb-pewter);

  --accent-ink: #ffffff;

  --shadow-card:     0 1px 2px rgba(16,16,20,0.04), 0 2px 8px rgba(16,16,20,0.06);
  --shadow-elevated: 0 4px 14px rgba(16,16,20,0.08), 0 10px 28px rgba(16,16,20,0.10);
  --shadow-hub-glow: 0 0 40px rgba(201, 169, 98, 0.20);
  --shadow-sheet:    0 -20px 60px rgba(16, 16, 20, 0.10);
}

/* ── 3. Legacy var aliases (fd-* / ff-* / fc-* / fa-* prefix → new) ──── *
   The existing fb-theme stylesheets reference page-scoped var prefixes.
   Re-point them all at the design system equivalents so the thousands of
   lines of existing page CSS inherit the new palette/fonts/motion without
   edit. Keeps the cascade clean: designers/devs can use EITHER the legacy
   names or the canonical design-system names interchangeably.               */
:root {
  /* Font aliases (override Salient's theme-option-built values) */
  --fb-font-display: var(--font-display);
  --fb-font-body:    var(--font-body);
  --fb-font-mono:    var(--font-mono);

  /* Fund Detail page (--fd-*) */
  --fd-obsidian: var(--fb-obsidian);
  --fd-charcoal: var(--fb-charcoal);
  --fd-graphite: var(--fb-graphite);
  --fd-slate:    var(--fb-slate);
  --fd-pewter:   var(--fb-pewter);
  --fd-silver:   var(--fb-silver);
  --fd-platinum: var(--fb-platinum);
  --fd-ivory:    var(--fb-ivory);
  --fd-gold:     var(--fb-gold);
  --fd-success:  var(--fb-success);
  --fd-error:    var(--fb-error);
  --fd-warning:  var(--fb-warning);
  --fd-info:     var(--fb-info);
  --fd-font-display: var(--font-display);
  --fd-font-body:    var(--font-body);

  /* Fund Finder page (--ff-*) */
  --ff-obsidian: var(--fb-obsidian);
  --ff-charcoal: var(--fb-charcoal);
  --ff-graphite: var(--fb-graphite);
  --ff-slate:    var(--fb-slate);
  --ff-pewter:   var(--fb-pewter);
  --ff-silver:   var(--fb-silver);
  --ff-platinum: var(--fb-platinum);
  --ff-ivory:    var(--fb-ivory);
  --ff-gold:     var(--fb-gold);
  --ff-success:  var(--fb-success);
  --ff-error:    var(--fb-error);

  /* Fund Compare (--fc-*) */
  --fc-obsidian: var(--fb-obsidian);
  --fc-charcoal: var(--fb-charcoal);
  --fc-graphite: var(--fb-graphite);
  --fc-slate:    var(--fb-slate);
  --fc-pewter:   var(--fb-pewter);
  --fc-silver:   var(--fb-silver);
  --fc-platinum: var(--fb-platinum);
  --fc-ivory:    var(--fb-ivory);
  --fc-gold:     var(--fb-gold);
  --fc-success:  var(--fb-success);
  --fc-error:    var(--fb-error);

  /* Build-a-Fund (--fa-*) */
  --fa-obsidian: var(--fb-obsidian);
  --fa-charcoal: var(--fb-charcoal);
  --fa-graphite: var(--fb-graphite);
  --fa-slate:    var(--fb-slate);
  --fa-gold:     var(--fb-gold);
  --fa-ivory:    var(--fb-ivory);
  --fa-success:  var(--fb-success);
  --fa-error:    var(--fb-error);

  /* Build-a-Fund standalone file uses --bf-* prefix */
  --bf-obsidian: var(--fb-obsidian);
  --bf-charcoal: var(--fb-charcoal);
  --bf-graphite: var(--fb-graphite);
  --bf-slate:    var(--fb-slate);
  --bf-pewter:   var(--fb-pewter);
  --bf-silver:   var(--fb-silver);
  --bf-platinum: var(--fb-platinum);
  --bf-ivory:    var(--fb-ivory);
  --bf-gold:     var(--fb-gold);
  --bf-gold-light: var(--fb-gold-light);
  --bf-success:  var(--fb-success);
  --bf-error:    var(--fb-error);

  /* Colour aliases used in various page CSS (--color-*) */
  --color-bg:        var(--bg);
  --color-surface:   var(--surface);
  --color-border:    var(--border);
  --color-text:      var(--text);
  --color-muted:     var(--text-muted);
  --color-gold:      var(--gold);
  --color-success:   var(--pos);
  --color-error:     var(--neg);
}

/* ── 4. Keyframes (ported from ui_kits/app/app.css) ───────────────────── */
@keyframes fb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.1); }
}
@keyframes fb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fb-slide {
  0%   { background-position: -240% 0; }
  100% { background-position: 240% 0; }
}
@keyframes fb-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fb-bar-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes fb-sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fb-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fb-row-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fb-hub-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.12); }
}
@keyframes fb-spark-run {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes fb-draw-path {
  0%   { stroke-dashoffset: 600; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -600; }
}
@keyframes fb-tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

/* ── 5. Global base styles ───────────────────────────────────────────── *
   Tabular numerals on the entire body — non-negotiable for a data product;
   columns of numbers must line up. Applied via font-variant-numeric with
   the font-feature-settings fallback for older browsers.                     */
body,
body * {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Respect prefers-reduced-motion — pause all infinite decorative anims. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 6. Utility classes ──────────────────────────────────────────────── */
.fb-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fb-stat-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fb-mono, .fb-isin {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
}

.fb-pos { color: var(--pos); }
.fb-neg { color: var(--neg); }
.fb-gold-text { color: var(--accent); }

/* ── 7. Primitive components ─────────────────────────────────────────── */

/* Buttons */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.fb-btn:hover    { border-color: var(--accent); color: var(--accent); }
.fb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fb-btn-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(201,169,98,0.25);
}
.fb-btn-primary:hover {
  background: linear-gradient(180deg, #ecdfb5 0%, var(--gold-light) 50%, var(--gold) 100%);
  color: var(--accent-ink);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(201,169,98,0.35);
}

.fb-btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.fb-btn-secondary:hover { background: var(--gold-15); color: var(--accent); }

.fb-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.fb-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.fb-btn-destructive {
  background: transparent;
  color: var(--neg);
  border-color: rgba(248, 113, 113, 0.5);
}
.fb-btn-destructive:hover { background: rgba(248, 113, 113, 0.08); }

/* Badges */
.fb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--gold-15);
  color: var(--gold);
}
.fb-badge-gold    { background: var(--gold-15);             color: var(--gold); }
.fb-badge-green   { background: rgba(74, 222, 128, 0.15);   color: #4ade80; }
.fb-badge-red     { background: rgba(248, 113, 113, 0.15);  color: #f87171; }
.fb-badge-blue    { background: rgba(96, 165, 250, 0.15);   color: #60a5fa; }
.fb-badge-purple  { background: rgba(167, 139, 250, 0.15);  color: #a78bfa; }
.fb-badge-orange  { background: rgba(251, 146, 60, 0.15);   color: #fb923c; }
.fb-badge-neutral { background: var(--surface-2);           color: var(--text-2); }

/* Pill tabs */
.fb-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.fb-pill {
  padding: 7px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-xl) - 4px);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.fb-pill:hover      { color: var(--text); }
.fb-pill.on,
.fb-pill.active    { background: var(--gold); color: var(--accent-ink); }

/* Card */
.fb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fb-card-elevated { box-shadow: var(--shadow-elevated); }

/* Stat chip */
.fb-chip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.fb-chip .label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fb-chip .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fb-chip .value.pos { color: var(--pos); }
.fb-chip .value.neg { color: var(--neg); }

/* Skeleton shimmer line */
.fb-skeleton-line {
  position: relative;
  height: 12px;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.fb-skeleton-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, 0.10) 40%,
    rgba(255, 245, 216, 0.18) 50%,
    rgba(201, 169, 98, 0.10) 60%,
    rgba(201, 169, 98, 0) 100%
  );
  background-size: 240% 100%;
  animation: fb-slide 2s linear infinite;
}

/* Spinner */
.fb-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fb-spin 0.8s linear infinite;
}

/* Lift-on-hover helper — use on fund cards, discover cards, etc. */
.fb-lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.fb-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--accent);
}