/* =========================================================
   MLP TRADING DESIGN SYSTEM - Tokens
   Pulled directly from MLP Operating System (Cashflow OS).
   Dark-first; light theme defined via [data-theme="light"].
   ========================================================= */

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

:root {
  /* ============ SURFACES & ATMOSPHERE ============ */
  --bg-base:   #16151f;
  --bg-deep:   #131220;
  --bg-glow-1: #221d35;   /* violet glow */
  --bg-glow-2: #1d2030;   /* deep navy */
  --bg-glow-3: #2a2235;   /* warm violet */

  --surface-glass:   rgba(255,255,255,0.025);
  --surface-glass-2: rgba(255,255,255,0.045);
  --surface-solid:   #22202c;
  --surface-elev:    #2a2838;
  --surface-hover:   #2f2d3e;

  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --border-glow:   rgba(167,139,250,0.32);
  --border-luxe:   rgba(230,200,150,0.30);

  /* ============ TEXT (FG SCALE) ============ */
  --fg-1: #f5f4f8;    /* primary text */
  --fg-2: #c4c2cc;    /* secondary text */
  --fg-3: #8a8794;    /* tertiary / meta */
  --fg-4: #5a5764;    /* quaternary / disabled */
  --fg-luxe: #e6c896; /* champagne text accent */

  /* aliases used in source */
  --text:   var(--fg-1);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);
  --text-4: var(--fg-4);
  --text-luxe: var(--fg-luxe);

  /* ============ BRAND ============ */
  --violet:        #a78bfa;
  --violet-bright: #c4b5fd;
  --violet-deep:   #7c5cf5;
  --violet-glow:   rgba(167,139,250,0.40);
  --violet-soft:   rgba(167,139,250,0.14);
  --violet-line:   rgba(167,139,250,0.30);

  --champagne:        #e6c896;
  --champagne-bright: #f0d8a8;
  --champagne-glow:   rgba(230,200,150,0.28);
  --champagne-soft:   rgba(230,200,150,0.10);

  /* ============ STATUS ============ */
  --red:        #fb8a8a;
  --red-bright: #ffb0b0;
  --red-glow:   rgba(251,138,138,0.18);
  --red-soft:   rgba(251,138,138,0.10);

  --green:        #6ee7a3;
  --green-bright: #a7f3c8;
  --green-glow:   rgba(110,231,163,0.18);
  --green-soft:   rgba(110,231,163,0.10);

  --amber:      #f5c97e;
  --amber-glow: rgba(245,201,126,0.18);
  --amber-soft: rgba(245,201,126,0.10);

  --blue:      #93c5fd;
  --blue-glow: rgba(147,197,253,0.18);
  --blue-soft: rgba(147,197,253,0.10);

  --grid-line: rgba(255,255,255,0.04);

  /* ============ TYPE ============ */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Feature settings - used app-wide */
  --type-features: 'ss01', 'cv11';
  --type-tnum:     'tnum';

  /* ============ RADIUS ============ */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  /* ============ SHADOW / ELEVATION ============ */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.18);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.30), 0 0 0 1px var(--border) inset;
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.45), 0 0 0 1px var(--border) inset;
  --shadow-glow: 0 0 0 1px var(--border-strong) inset, 0 8px 32px rgba(167,139,250,0.10);

  /* ============ SPACING (4pt scale, used loosely in source) ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  72px;
  --space-10: 96px;

  /* ============ MOTION ============ */
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;
  --dur-reveal:  850ms;
}

/* ============ LIGHT THEME OVERRIDES (carry over from source) ============ */
[data-theme="light"] {
  --bg-base: #f7f7fb;
  --bg-deep: #efeff5;

  --surface-glass:   rgba(255,255,255,0.7);
  --surface-glass-2: rgba(255,255,255,0.85);
  --surface-solid:   #ffffff;
  --surface-elev:    #fafafd;
  --surface-hover:   #f3f3f8;

  --border:        rgba(20,20,30,0.06);
  --border-strong: rgba(20,20,30,0.12);
  --border-glow:   rgba(124,58,237,0.28);
  --border-luxe:   rgba(180,140,60,0.30);

  --fg-1: #14141c;
  --fg-2: #444452;
  --fg-3: #6a6a78;
  --fg-4: #a4a4b0;
  --fg-luxe: #92722a;

  --violet:        #7c3aed;
  --violet-bright: #6d28d9;
  --violet-glow:   rgba(124,58,237,0.20);
  --violet-soft:   rgba(124,58,237,0.08);
  --violet-line:   rgba(124,58,237,0.22);

  --champagne:      #b8923c;
  --champagne-glow: rgba(184,146,60,0.18);
  --champagne-soft: rgba(184,146,60,0.06);

  --grid-line: rgba(0,0,0,0.05);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Drop these classes on elements, or @extend in your own CSS.
   ========================================================= */

/* Hero / display - gradient white→silver, drop-shadow violet halo */
.t-hero {
  font-family: var(--font-sans);
  font-size: clamp(38px, 6.6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  background: linear-gradient(180deg, #ffffff 0%, #f0eff5 50%, #cfcdd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 50px rgba(167,139,250,0.22));
}
.t-hero em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(180deg, var(--violet-bright) 0%, var(--violet) 60%, var(--violet-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section title (h2) - italicized accent goes violet via <em> */
.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--fg-1);
}
.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--fg-1);
}
.t-h2 em, h2 em { font-style: normal; color: var(--violet-bright); font-weight: 700; }

.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--fg-1);
}
.t-h3 em, h3 em { font-style: normal; color: var(--violet-bright); }

/* Big KPI numeric - tabular, tight tracking */
.t-numeric-xl {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1;
  font-feature-settings: var(--type-tnum);
}
.t-numeric-l {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  font-feature-settings: var(--type-tnum);
}

/* Body */
.t-body, p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-3);
}

/* Eyebrow - mono uppercase wide-tracked. Used everywhere as a kicker/label. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-eyebrow--num { color: var(--champagne); font-size: 11px; letter-spacing: 0.06em; }

/* Label - slightly larger eyebrow for KPI titles */
.t-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Caption / mono meta - clock, stamps, axis labels */
.t-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* Code / mono inline */
code, .t-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--violet-bright);
  background: var(--violet-soft);
  border: 1px solid var(--violet-line);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Subtitle for hero - uppercase mono with luxe span */
.t-hero-sub {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-hero-sub .luxe { color: var(--champagne); }