/* ============================================================
   VS-Trade Intelligence — Design Tokens
   Colors, Type, Spacing, Radii, Borders, Shadows, Motion
   ============================================================ */

/* ---------- FONTS (Google Fonts substitutions) -----------------
   Brief specifies: Inter / Source Serif / JetBrains Mono.
   We load them via @font-face from local /fonts where available,
   with Google Fonts as the runtime CDN fallback.
   --------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — INSTITUTIONAL TRUST PALETTE (default)
     ============================================================ */

  /* Primary — Deep navy. Used for headers, primary text on light, brand chrome. */
  --vst-navy-900: #0A1929;   /* near-black navy, body text, header bar */
  --vst-navy-800: #0F2238;
  --vst-navy-700: #1B2B4D;   /* secondary brand */
  --vst-navy-600: #243759;
  --vst-navy-500: #34507F;

  /* Accent — Electric blue. Used for links, key highlights, chart series 1. */
  --vst-blue-700: #003F99;
  --vst-blue-600: #005FCC;   /* AAA-grade link blue */
  --vst-blue-500: #0B5FFF;   /* electric accent */
  --vst-blue-400: #3D82FF;
  --vst-blue-100: #E6EEFF;   /* tinted callout backgrounds */

  /* Neutrals — Warm grays, editorial paper feel */
  --vst-paper:    #FAF9F5;   /* page background, off-white warm */
  --vst-paper-2:  #F5F5F0;   /* alt section background */
  --vst-rule:     #E4E2DA;   /* hairline rules */
  --vst-rule-2:   #D4D2C9;   /* heavier dividers */
  --vst-mute-3:   #B8B6AC;   /* placeholder text */
  --vst-mute-2:   #8B8B83;   /* secondary text */
  --vst-mute-1:   #5A5A53;   /* tertiary text on light */
  --vst-ink:      #2C2C2C;   /* body on paper (when not navy) */
  --vst-ink-pure: #0A0A0A;

  /* Signal — Bloomberg-adjacent semantic colors */
  --vst-amber-600: #D98300;  /* amber CTA, primary buttons */
  --vst-amber-500: #FFA000;  /* amber hover/highlight */
  --vst-amber-100: #FFF1D6;
  --vst-green-700: #1F7A3D;  /* growth, gain */
  --vst-green-500: #2BA15A;
  --vst-green-100: #E2F3E8;
  --vst-red-700:   #A8261C;  /* decline, alert */
  --vst-red-500:   #D14B3F;
  --vst-red-100:   #FBE5E2;

  /* ============================================================
     SEMANTIC COLOR TOKENS — use these in components, not raws
     ============================================================ */
  --bg:            var(--vst-paper);
  --bg-alt:        var(--vst-paper-2);
  --bg-inverse:    var(--vst-navy-900);

  --fg:            var(--vst-navy-900);     /* primary text */
  --fg-muted:      var(--vst-mute-1);       /* secondary text */
  --fg-subtle:     var(--vst-mute-2);       /* tertiary / metadata */
  --fg-placeholder:var(--vst-mute-3);
  --fg-on-inverse: var(--vst-paper);
  --fg-on-inverse-muted: #B6BFCC;

  --link:          var(--vst-blue-600);
  --link-hover:    var(--vst-blue-700);

  --rule:          var(--vst-rule);
  --rule-strong:   var(--vst-rule-2);
  --rule-inverse:  #1F3658;

  --accent:        var(--vst-amber-600);    /* CTA */
  --accent-hover:  var(--vst-amber-500);

  --signal-up:     var(--vst-green-700);
  --signal-down:   var(--vst-red-700);
  --signal-flat:   var(--vst-mute-1);
  --signal-info:   var(--vst-blue-600);

  /* Chart series — matplotlib-compatible order */
  --chart-1: #0B5FFF;   /* electric blue */
  --chart-2: #D98300;   /* amber */
  --chart-3: #1F7A3D;   /* green */
  --chart-4: #1B2B4D;   /* deep navy */
  --chart-5: #A8261C;   /* red */
  --chart-6: #5A5A53;   /* warm gray */
  --chart-grid: #E4E2DA;
  --chart-axis: #8B8B83;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Families */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Type scale — modular, slightly tighter than 1.250 for editorial density */
  --fs-xs:        11px;   /* metadata, footnote refs */
  --fs-sm:        13px;   /* caption, table cells, fine print */
  --fs-base:      15px;   /* body */
  --fs-md:        17px;   /* lead body / pull text */
  --fs-lg:        20px;   /* h5 / small section heads */
  --fs-xl:        24px;   /* h4 */
  --fs-2xl:       30px;   /* h3 */
  --fs-3xl:       38px;   /* h2 */
  --fs-4xl:       50px;   /* h1 */
  --fs-5xl:       68px;   /* display / report covers */

  /* Line heights */
  --lh-tight:     1.12;
  --lh-snug:      1.28;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  /* Letter spacing */
  --tr-tightest:  -0.025em;
  --tr-tight:     -0.012em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-wider:     0.08em;
  --tr-eyebrow:   0.14em;    /* small caps / eyebrow labels */

  /* ============================================================
     SPACING — 4px base, 8-step ramp
     ============================================================ */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ============================================================
     RADII — subtle. >8px feels consumer; we cap at 6.
     ============================================================ */
  --r-0:    0;
  --r-xs:   2px;     /* tags, dense table chips */
  --r-sm:   4px;     /* buttons, inputs */
  --r-md:   6px;     /* cards */
  --r-pill: 999px;   /* used sparingly — status dots, eyebrow chips */

  /* ============================================================
     BORDERS
     ============================================================ */
  --bw-hair:    1px;
  --bw-rule:    1px;
  --bw-strong:  2px;

  /* ============================================================
     SHADOWS — minimal, editorial. No drop-shadow drama.
     ============================================================ */
  --shadow-0:   none;
  --shadow-1:   0 1px 0 rgba(10, 25, 41, 0.04), 0 1px 2px rgba(10, 25, 41, 0.06);
  --shadow-2:   0 1px 0 rgba(10, 25, 41, 0.04), 0 2px 6px rgba(10, 25, 41, 0.08);
  --shadow-pop: 0 4px 16px rgba(10, 25, 41, 0.10), 0 1px 0 rgba(10, 25, 41, 0.04);

  /* Inner shadow used on dense data tables (Bloomberg-ish recess) */
  --shadow-inset-rule: inset 0 -1px 0 var(--rule);

  /* ============================================================
     MOTION — subtle. No bounces.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.4, 0, 0.1, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1200px;
  --container-narrow: 720px;     /* editorial reading column */
  --container-report: 980px;     /* PDF report body */
  --gutter: var(--sp-5);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — map to tokens above
   Use these in components rather than raw font-size.
   ============================================================ */

.vst-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1;
}

.vst-h1, h1.vst {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

.vst-h2, h2.vst {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

.vst-h3, h3.vst {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

.vst-h4, h4.vst {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

.vst-h5, h5.vst {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.vst-h6, h6.vst {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.vst-display {
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  line-height: 1.04;
  letter-spacing: var(--tr-tightest);
  color: var(--fg);
}

.vst-body, p.vst {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
}

.vst-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.vst-editorial {
  /* used for long-form editorial body in reports + landing */
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.vst-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.vst-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--fg-subtle);
}

.vst-mono, code.vst {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  font-feature-settings: 'tnum' on, 'lnum' on;
}

.vst-numeric {
  /* tabular numbers used in tables and KPIs */
  font-family: var(--font-sans);
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums;
}

.vst-kpi {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  line-height: 1;
}

/* ============================================================
   RESET-LITE — opinionated baseline for prototypes
   ============================================================ */
.vst-root {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vst-root * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE OVERRIDES — Mobile breakpoints                   */
/* Added: 11 may 2026 — fix overflow horizontal mobile         */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Featured Research grid 2-col → single column en mobile */
  .vst-grid-2 {
    display: block !important;
  }
  .vst-grid-2 > div {
    border-right: none !important;
    border-bottom: 1px solid var(--rule, #E5E7EB) !important;
    min-height: auto !important;
  }
  .vst-grid-2 > div:last-child {
    border-bottom: none !important;
  }

  /* Section padding ajustado mobile (era 96px 32px) */
  .vst-section {
    padding: 64px 20px !important;
  }

  /* Prevent body horizontal scroll - safety net */
  body {
    overflow-x: hidden;
  }

  /* Headings - ajustar para mobile */
  .vst-h2 {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 480px) {
  /* Very small mobile - extra tighten */
  .vst-h2 {
    font-size: 30px !important;
    letter-spacing: -.01em !important;
  }

  .vst-section {
    padding: 48px 16px !important;
  }
}