/* ============================================================
   VERO DESIGN SYSTEM — colors + type tokens
   "See the signal." — Premium minimal trading app
   Source: mobile/lib/theme.ts in TerrifiedofAI/PatternPulse
   ============================================================ */

/* --- Webfonts -------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ==========================================================
     BRAND PALETTE — slate-blue family (the V, accents, CTAs)
     ========================================================== */
  --vero-accent-50:  #AAC0FF;   /* lightest — highlights on navy */
  --vero-accent-100: #8BA4EE;   /* signal dot, hover on navy */
  --vero-accent-200: #7B94EE;   /* gradient mid */
  --vero-accent:     #6B8AE4;   /* PRIMARY brand blue */
  --vero-accent-dim: #5A7BD4;   /* pressed / hover dark */
  --vero-accent-700: #4A6BC4;   /* gradient start */
  --vero-accent-muted:         rgba(107, 138, 228, 0.12);
  --vero-accent-muted-light:   rgba(107, 138, 228, 0.08);
  --vero-accent-tint:          rgba(107, 138, 228, 0.06);

  /* Navy (app icon, splash, premium backdrops) */
  --vero-navy-900: #0C0E1A;
  --vero-navy-800: #111338;
  --vero-navy-700: #131640;
  --vero-navy-600: #181D50;
  --vero-navy-500: #1A1F52;
  --vero-navy-400: #1E2460;

  /* Signal gradients — used on V mark + icon + hero backdrops */
  --vero-gradient-signal:  linear-gradient(135deg, #4A6BC4 0%, #6B8AE4 55%, #8BA4EE 100%);
  --vero-gradient-accent:  linear-gradient(135deg, #5A7BD4 0%, #6B8AE4 50%, #7B94EE 100%);
  --vero-gradient-navy:    linear-gradient(145deg, #0C0E1A 0%, #111338 35%, #181D50 65%, #1E2460 100%);
  --vero-gradient-hero:    radial-gradient(ellipse at 50% 40%, rgba(107,138,228,0.06) 0%, transparent 60%);

  /* ==========================================================
     MARKET SEMANTIC — bullish/bearish/warning (domain colors)
     ========================================================== */
  --vero-bull:       #10B981;  /* bullish candle body, correct answer, positive */
  --vero-bull-wick:  #059669;
  --vero-bull-muted: rgba(16, 185, 129, 0.15);
  --vero-bull-tint:  rgba(16, 185, 129, 0.35);

  --vero-bear:       #EF4444;  /* bearish candle body, wrong answer, negative */
  --vero-bear-wick:  #DC2626;
  --vero-bear-muted: rgba(239, 68, 68, 0.15);
  --vero-bear-tint:  rgba(239, 68, 68, 0.35);

  --vero-warn:       #F59E0B;  /* daily challenge accent, time warnings */
  --vero-warn-muted: rgba(245, 158, 11, 0.12);

  /* Chart indicators (shared across themes) */
  --vero-ind-sma20: #60A5FA;
  --vero-ind-sma50: #F59E0B;
  --vero-ind-ema9:  #A78BFA;
  --vero-ind-vwap:  #F472B6;
  --vero-ind-bb:    #38BDF8;

  /* Drawing overlay (intentional hardcode in the app) */
  --vero-draw:      #FACC15;

  /* ==========================================================
     DARK THEME — default (PRIMARY PRESENTATION)
     Zinc blacks, slate-blue accent, high contrast text
     ========================================================== */
  --vero-bg:          #09090B;
  --vero-bg-surface:  #18181B;
  --vero-bg-card:     #1C1C1E;
  --vero-bg-elevated: #27272A;

  --vero-fg:          #FAFAFA;  /* textPrimary */
  --vero-fg-2:        #A1A1AA;  /* textSecondary */
  --vero-fg-3:        #71717A;  /* textMuted */
  --vero-fg-dim:      #3F3F46;  /* textDim */

  --vero-border:       #27272A;
  --vero-border-light: #3F3F46;

  /* ==========================================================
     SPACING — 4px base scale
     ========================================================== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* ==========================================================
     RADII — pill/lg/xl reign; 12–16px for cards, 22.5% for icons
     ========================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;
  --radius-icon: 22.5%;   /* iOS-style app icon mask */

  /* ==========================================================
     SHADOWS — subtle. Dark mode leans on tone + border.
     ========================================================== */
  --shadow-subtle: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-card:   0 2px 8px rgba(0,0,0,0.15);
  --shadow-glow:   0 8px 40px rgba(107, 138, 228, 0.25), 0 2px 12px rgba(0,0,0,0.5);
  --shadow-light-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* ==========================================================
     TYPE FAMILIES
     ========================================================== */
  --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter",         ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ==========================================================
     SEMANTIC TYPE TOKENS
     Space Grotesk: display + title + numeric hero stats
     Inter: body, labels, buttons (functional text)
     JetBrains Mono: prices, tickers, numbers in chart context
     ========================================================== */

  /* Wordmark — logo lockup, splash */
  --t-wordmark-size:    72px;
  --t-wordmark-tracking: 8px;
  --t-wordmark-weight:  700;

  /* Display — largest title in-app */
  --t-display-size:   40px;
  --t-display-lh:     1.05;
  --t-display-weight: 700;
  --t-display-family: var(--font-heading);

  /* Title (h1) — screen titles like "Vero", "Performance" */
  --t-title-size:   28px;
  --t-title-lh:     1.15;
  --t-title-weight: 700;
  --t-title-family: var(--font-heading);

  /* h2 — section headers ("Focus Areas", "By Category") */
  --t-h2-size:   20px;
  --t-h2-lh:     1.25;
  --t-h2-weight: 700;
  --t-h2-family: var(--font-heading);

  /* h3 — card headers, medium emphasis */
  --t-h3-size:   16px;
  --t-h3-lh:     1.3;
  --t-h3-weight: 600;
  --t-h3-family: var(--font-body);

  /* Subtitle — "Welcome back, Justin" */
  --t-subtitle-size:   16px;
  --t-subtitle-weight: 500;
  --t-subtitle-family: var(--font-body);

  /* Body */
  --t-body-size:   15px;
  --t-body-lh:     1.55;
  --t-body-weight: 400;
  --t-body-family: var(--font-body);

  /* Label — small-caps metadata */
  --t-label-size:    12px;
  --t-label-weight:  600;
  --t-label-tracking: 0.5px;
  --t-label-family:  var(--font-body);

  /* Eyebrow — "01 — Full Lockup" style */
  --t-eyebrow-size:    11px;
  --t-eyebrow-weight:  600;
  --t-eyebrow-tracking: 3px;
  --t-eyebrow-family:  var(--font-heading);

  /* Button */
  --t-button-size:   15px;
  --t-button-weight: 600;
  --t-button-family: var(--font-body);

  /* Caption / helper */
  --t-caption-size:   12px;
  --t-caption-weight: 400;
  --t-caption-family: var(--font-body);

  /* Mono (ticker / price) */
  --t-mono-size:   16px;
  --t-mono-weight: 500;
  --t-mono-family: var(--font-mono);

  /* Mono hero (big numeric stat) */
  --t-mono-hero-size:   32px;
  --t-mono-hero-weight: 700;
  --t-mono-hero-family: var(--font-mono);
}

/* ==========================================================
   LIGHT THEME — override via [data-theme="light"] or media query
   ========================================================== */
[data-theme="light"],
.vero-light {
  --vero-bg:          #FFFFFF;
  --vero-bg-surface:  #F8F9FA;
  --vero-bg-card:     #FFFFFF;
  --vero-bg-elevated: #F1F3F5;

  --vero-fg:    #1A1A1A;
  --vero-fg-2:  #4B5563;
  --vero-fg-3:  #6B7280;
  --vero-fg-dim: #9CA3AF;

  --vero-border:       #E5E7EB;
  --vero-border-light: #F3F4F6;

  --vero-bull:      #16A34A;
  --vero-bull-wick: #15803D;
  --vero-bear:      #DC2626;
  --vero-bear-wick: #B91C1C;
  --vero-warn:      #D97706;

  --vero-accent-muted: rgba(107, 138, 228, 0.08);
}

/* ==========================================================
   SEMANTIC TYPE CLASSES — drop-in for html specimens & cards
   ========================================================== */
.vero-wordmark {
  font-family: var(--font-heading);
  font-weight: var(--t-wordmark-weight);
  font-size: var(--t-wordmark-size);
  letter-spacing: var(--t-wordmark-tracking);
  color: var(--vero-fg);
}
.vero-display {
  font-family: var(--t-display-family);
  font-weight: var(--t-display-weight);
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  color: var(--vero-fg);
}
.vero-title, h1.vero {
  font-family: var(--t-title-family);
  font-weight: var(--t-title-weight);
  font-size: var(--t-title-size);
  line-height: var(--t-title-lh);
  color: var(--vero-fg);
}
.vero-h2, h2.vero {
  font-family: var(--t-h2-family);
  font-weight: var(--t-h2-weight);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  color: var(--vero-fg);
}
.vero-h3, h3.vero {
  font-family: var(--t-h3-family);
  font-weight: var(--t-h3-weight);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--vero-fg);
}
.vero-subtitle {
  font-family: var(--t-subtitle-family);
  font-weight: var(--t-subtitle-weight);
  font-size: var(--t-subtitle-size);
  color: var(--vero-fg-2);
}
.vero-body, p.vero {
  font-family: var(--t-body-family);
  font-weight: var(--t-body-weight);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--vero-fg-2);
}
.vero-label {
  font-family: var(--t-label-family);
  font-weight: var(--t-label-weight);
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-tracking);
  color: var(--vero-fg-3);
}
.vero-eyebrow {
  font-family: var(--t-eyebrow-family);
  font-weight: var(--t-eyebrow-weight);
  font-size: var(--t-eyebrow-size);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--vero-accent);
}
.vero-button-text {
  font-family: var(--t-button-family);
  font-weight: var(--t-button-weight);
  font-size: var(--t-button-size);
}
.vero-caption {
  font-family: var(--t-caption-family);
  font-weight: var(--t-caption-weight);
  font-size: var(--t-caption-size);
  color: var(--vero-fg-3);
}
.vero-mono {
  font-family: var(--t-mono-family);
  font-weight: var(--t-mono-weight);
  font-size: var(--t-mono-size);
  color: var(--vero-fg);
  font-variant-numeric: tabular-nums;
}
.vero-mono-hero {
  font-family: var(--t-mono-hero-family);
  font-weight: var(--t-mono-hero-weight);
  font-size: var(--t-mono-hero-size);
  color: var(--vero-fg);
  font-variant-numeric: tabular-nums;
}
.vero-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--vero-fg-3);
}