/* ============================================================
   VERTEX MOMENTUM ADVISORY — Design Tokens
   Colors, type, spacing, radii, shadows, motion
   ============================================================ */

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

:root {
  /* ──────────────────────────────────────────────────────────
     COLOR — Primary (Ink / Navy)
     The boardroom base. Used for backgrounds in dark mode,
     headlines and surfaces in light mode.
     ────────────────────────────────────────────────────────── */
  --vm-ink-950: #060B1A;   /* deepest, near-black navy */
  --vm-ink-900: #0A1228;   /* primary dark surface */
  --vm-ink-800: #0F1A38;   /* elevated dark surface */
  --vm-ink-700: #1A2748;   /* card on dark */
  --vm-ink-600: #2A3A66;   /* hairline borders on dark */
  --vm-ink-500: #4A5A85;   /* muted text on dark */
  --vm-ink-400: #6B7BA3;   /* secondary text on dark */
  --vm-ink-300: #94A0C0;
  --vm-ink-200: #C2CADD;
  --vm-ink-100: #E4E8F2;
  --vm-ink-50:  #F4F6FB;

  /* ──────────────────────────────────────────────────────────
     COLOR — Momentum Accent (Orange → Teal)
     Use sparingly. The gradient itself is the brand mark.
     Solo accents: Ember for energy, Teal for clarity.
     ────────────────────────────────────────────────────────── */
  --vm-ember-700: #B8410E;
  --vm-ember-600: #D9521A;
  --vm-ember-500: #F26B2C;   /* primary ember */
  --vm-ember-400: #FF8B4F;
  --vm-ember-300: #FFAE82;
  --vm-ember-100: #FFE4D2;

  --vm-teal-700: #0E6B6B;
  --vm-teal-600: #138484;
  --vm-teal-500: #1AA39E;   /* primary teal */
  --vm-teal-400: #3DC0BB;
  --vm-teal-300: #74D7D3;
  --vm-teal-100: #D2F0EE;

  /* The Momentum Gradient — the single most-used brand asset */
  --vm-gradient-momentum: linear-gradient(105deg, #F26B2C 0%, #E85F45 35%, #8E6E8C 65%, #1AA39E 100%);
  --vm-gradient-momentum-soft: linear-gradient(105deg, #FFE4D2 0%, #D2F0EE 100%);
  --vm-gradient-ascent: linear-gradient(15deg, #0A1228 0%, #1A2748 60%, #2A3A66 100%);

  /* ──────────────────────────────────────────────────────────
     COLOR — Neutrals (Paper / Grayscale)
     Documents, dashboards, light surfaces.
     ────────────────────────────────────────────────────────── */
  --vm-paper:    #FBFBF8;   /* warm off-white, primary light bg */
  --vm-paper-2:  #F4F4EE;   /* slight contrast for cards */
  --vm-gray-50:  #F7F7F4;
  --vm-gray-100: #ECECE6;
  --vm-gray-200: #DCDCD3;
  --vm-gray-300: #B8B8AE;
  --vm-gray-400: #8E8E84;
  --vm-gray-500: #6B6B62;
  --vm-gray-600: #4F4F47;
  --vm-gray-700: #3A3A33;
  --vm-gray-800: #25251F;
  --vm-gray-900: #15150F;

  /* ──────────────────────────────────────────────────────────
     COLOR — Semantic (data + state)
     ────────────────────────────────────────────────────────── */
  --vm-success: #1AA36B;
  --vm-warning: #E8A317;
  --vm-danger:  #D63A3A;
  --vm-info:    #2C7DD9;

  /* Data viz — uses brand-extended palette, ordered for serial charts */
  --vm-data-1: #F26B2C;   /* ember */
  --vm-data-2: #1AA39E;   /* teal */
  --vm-data-3: #2C7DD9;   /* signal blue */
  --vm-data-4: #8E6E8C;   /* gradient mid (mauve) */
  --vm-data-5: #E8A317;   /* gold */
  --vm-data-6: #5B6F9E;   /* slate blue */

  /* ──────────────────────────────────────────────────────────
     SEMANTIC — Light theme (default)
     ────────────────────────────────────────────────────────── */
  --vm-bg:           var(--vm-paper);
  --vm-bg-elevated: #FFFFFF;
  --vm-bg-sunken:   var(--vm-gray-100);
  --vm-bg-inverse:  var(--vm-ink-900);

  --vm-fg:           var(--vm-ink-900);   /* primary text */
  --vm-fg-2:         var(--vm-ink-800);   /* secondary heads */
  --vm-fg-muted:     var(--vm-gray-500);  /* muted body */
  --vm-fg-subtle:    var(--vm-gray-400);  /* captions */
  --vm-fg-on-accent: #FFFFFF;
  --vm-fg-inverse:   var(--vm-paper);

  --vm-border:        var(--vm-gray-200);
  --vm-border-strong: var(--vm-gray-300);
  --vm-border-ink:    var(--vm-ink-900);

  --vm-accent:       var(--vm-ember-500);
  --vm-accent-2:     var(--vm-teal-500);
  --vm-accent-fg:    #FFFFFF;

  /* ──────────────────────────────────────────────────────────
     TYPE — Families
     Inter Tight = primary geometric sans (Montserrat-adjacent
     but more modern/neutral; substitution flagged in README).
     Geist Mono = data labels, code, numbers in tables.
     ────────────────────────────────────────────────────────── */
  --vm-font-sans: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --vm-font-display: "Inter Tight", "Söhne", system-ui, sans-serif;
  --vm-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ──────────────────────────────────────────────────────────
     TYPE — Scale (modular, ratio ≈ 1.25 → 1.333 at the top)
     Sizes are tuned for premium B2B: large display, comfortable body.
     ────────────────────────────────────────────────────────── */
  --vm-text-xs:   12px;
  --vm-text-sm:   14px;
  --vm-text-base: 16px;
  --vm-text-md:   18px;
  --vm-text-lg:   20px;
  --vm-text-xl:   24px;
  --vm-text-2xl:  30px;
  --vm-text-3xl:  38px;
  --vm-text-4xl:  48px;
  --vm-text-5xl:  64px;
  --vm-text-6xl:  84px;
  --vm-text-7xl:  112px;

  --vm-leading-tight:   1.05;
  --vm-leading-snug:    1.2;
  --vm-leading-normal:  1.5;
  --vm-leading-relaxed: 1.65;

  --vm-tracking-tightest: -0.04em;
  --vm-tracking-tighter:  -0.025em;
  --vm-tracking-tight:    -0.015em;
  --vm-tracking-normal:   0;
  --vm-tracking-wide:     0.04em;
  --vm-tracking-widest:   0.18em;   /* eyebrow / label caps */

  --vm-weight-regular:  400;
  --vm-weight-medium:   500;
  --vm-weight-semibold: 600;
  --vm-weight-bold:     700;
  --vm-weight-black:    800;

  /* ──────────────────────────────────────────────────────────
     SPACING (4px base)
     ────────────────────────────────────────────────────────── */
  --vm-space-0:  0px;
  --vm-space-1:  4px;
  --vm-space-2:  8px;
  --vm-space-3:  12px;
  --vm-space-4:  16px;
  --vm-space-5:  20px;
  --vm-space-6:  24px;
  --vm-space-8:  32px;
  --vm-space-10: 40px;
  --vm-space-12: 48px;
  --vm-space-16: 64px;
  --vm-space-20: 80px;
  --vm-space-24: 96px;
  --vm-space-32: 128px;
  --vm-space-40: 160px;

  /* ──────────────────────────────────────────────────────────
     RADII — restrained. 4–10px for UI; 999px for pills only.
     ────────────────────────────────────────────────────────── */
  --vm-radius-xs: 2px;
  --vm-radius-sm: 4px;
  --vm-radius-md: 6px;
  --vm-radius-lg: 10px;
  --vm-radius-xl: 14px;
  --vm-radius-2xl: 20px;
  --vm-radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────
     SHADOWS — soft, layered, no rgba(0,0,0,0.5) chunks.
     Tuned to a navy ambient light to feel premium.
     ────────────────────────────────────────────────────────── */
  --vm-shadow-xs: 0 1px 2px rgba(10, 18, 40, 0.06);
  --vm-shadow-sm: 0 2px 6px rgba(10, 18, 40, 0.06), 0 1px 2px rgba(10, 18, 40, 0.04);
  --vm-shadow-md: 0 6px 18px rgba(10, 18, 40, 0.08), 0 2px 6px rgba(10, 18, 40, 0.04);
  --vm-shadow-lg: 0 18px 40px rgba(10, 18, 40, 0.10), 0 6px 12px rgba(10, 18, 40, 0.06);
  --vm-shadow-xl: 0 30px 70px rgba(10, 18, 40, 0.14), 0 10px 24px rgba(10, 18, 40, 0.08);
  --vm-shadow-glow-ember: 0 0 0 1px rgba(242, 107, 44, 0.15), 0 8px 28px rgba(242, 107, 44, 0.22);
  --vm-shadow-glow-teal:  0 0 0 1px rgba(26, 163, 158, 0.15), 0 8px 28px rgba(26, 163, 158, 0.22);

  --vm-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ──────────────────────────────────────────────────────────
     MOTION — calm, deliberate. No bounces.
     "Momentum" comes from direction (upward, leftward), not bounce.
     ────────────────────────────────────────────────────────── */
  --vm-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --vm-ease-entrance: cubic-bezier(0.16, 0.84, 0.32, 1);
  --vm-ease-exit:     cubic-bezier(0.5, 0, 0.75, 0);

  --vm-duration-instant: 80ms;
  --vm-duration-fast:    160ms;
  --vm-duration-base:    240ms;
  --vm-duration-slow:    420ms;
  --vm-duration-slower:  680ms;

  /* ──────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────── */
  --vm-container-narrow: 720px;
  --vm-container:        1120px;
  --vm-container-wide:   1320px;
  --vm-gutter: clamp(16px, 4vw, 48px);
}

/* ──────────────────────────────────────────────────────────
   DARK SURFACE — opt-in via [data-theme="dark"] or .vm-dark
   ────────────────────────────────────────────────────────── */
[data-theme="dark"], .vm-dark {
  --vm-bg:           var(--vm-ink-900);
  --vm-bg-elevated:  var(--vm-ink-800);
  --vm-bg-sunken:    var(--vm-ink-950);
  --vm-bg-inverse:   var(--vm-paper);

  --vm-fg:           var(--vm-paper);
  --vm-fg-2:         var(--vm-ink-100);
  --vm-fg-muted:     var(--vm-ink-300);
  --vm-fg-subtle:    var(--vm-ink-400);
  --vm-fg-inverse:   var(--vm-ink-900);

  --vm-border:        var(--vm-ink-700);
  --vm-border-strong: var(--vm-ink-600);
  --vm-border-ink:    var(--vm-paper);
}

/* ============================================================
   SEMANTIC TYPE — element-level defaults
   ============================================================ */

.vm-display-1, h1.vm-hero {
  font-family: var(--vm-font-display);
  font-size: clamp(48px, 7vw, var(--vm-text-7xl));
  line-height: 0.98;
  letter-spacing: var(--vm-tracking-tightest);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-fg);
  text-wrap: balance;
}

.vm-display-2 {
  font-family: var(--vm-font-display);
  font-size: clamp(40px, 5.5vw, var(--vm-text-6xl));
  line-height: 1.02;
  letter-spacing: var(--vm-tracking-tighter);
  font-weight: var(--vm-weight-medium);
  color: var(--vm-fg);
  text-wrap: balance;
}

.vm-h1, h1 {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-5xl);
  line-height: var(--vm-leading-tight);
  letter-spacing: var(--vm-tracking-tighter);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg);
  text-wrap: balance;
  margin: 0;
}

.vm-h2, h2 {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-3xl);
  line-height: var(--vm-leading-snug);
  letter-spacing: var(--vm-tracking-tight);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg);
  margin: 0;
}

.vm-h3, h3 {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-2xl);
  line-height: 1.25;
  letter-spacing: var(--vm-tracking-tight);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg);
  margin: 0;
}

.vm-h4, h4 {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-xl);
  line-height: 1.3;
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg);
  margin: 0;
}

.vm-eyebrow {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-xs);
  letter-spacing: var(--vm-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vm-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--vm-ember-500);
}

.vm-lead {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-lg);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-fg-muted);
  font-weight: var(--vm-weight-regular);
  text-wrap: pretty;
}

.vm-body, p {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-fg);
  font-weight: var(--vm-weight-regular);
  text-wrap: pretty;
}

.vm-body-sm, small {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-sm);
  line-height: var(--vm-leading-normal);
  color: var(--vm-fg-muted);
}

.vm-caption {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-xs);
  line-height: var(--vm-leading-normal);
  color: var(--vm-fg-subtle);
  letter-spacing: 0.01em;
}

.vm-data-label {
  font-family: var(--vm-font-mono);
  font-size: var(--vm-text-xs);
  letter-spacing: var(--vm-tracking-wide);
  text-transform: uppercase;
  color: var(--vm-fg-muted);
  font-weight: var(--vm-weight-medium);
}

.vm-metric {
  font-family: var(--vm-font-display);
  font-size: var(--vm-text-5xl);
  line-height: 1;
  letter-spacing: var(--vm-tracking-tighter);
  font-weight: var(--vm-weight-semibold);
  color: var(--vm-fg);
  font-variant-numeric: tabular-nums;
}

.vm-mono, code {
  font-family: var(--vm-font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Gradient text — use sparingly */
.vm-grad-text {
  background: var(--vm-gradient-momentum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.vm-body-base {
  font-family: var(--vm-font-sans);
  font-size: var(--vm-text-base);
  line-height: var(--vm-leading-relaxed);
  color: var(--vm-fg);
  background: var(--vm-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

::selection {
  background: var(--vm-ember-500);
  color: white;
}