/* ============================================================
   EX Venture — Colors & Type
   "Think Unlimited" — Infrastructure for builders.

   Operator-led, institutional, global. Dark-first UI with warm
   natural-light photography. Signature magenta against deep
   charcoal / pure black.
   ============================================================ */

/* -- Web fonts ------------------------------------------------ */

/* Codec Pro — brand display / headline face (provided by client).
   Used sparingly for wordmark-style headlines and large statements. */
@font-face {
  font-family: "Codec Pro";
  src: url("fonts/CodecPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Codec Pro";
  src: url("fonts/CodecPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Manrope — primary display + UI workhorse (recommended in brief).
   Inter — body + data. IBM Plex Mono — captions, counters, labels. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* --- Brand core ----------------------------------------- */
  --exv-magenta: #fb2f5a;        /* primary brand pink — CTAs, accents */
  --exv-magenta-2: #e91e8c;      /* codebase link-pink (articles, tags) */
  --exv-deep-pink: #b5165f;      /* deeper magenta — hover, pressed */
  --exv-crimson: #960320;        /* deep red — premium accent */
  --exv-amber: #fbbf24;          /* EXFI accent gold (from codebase) */

  /* --- Neutrals (dark-first) ------------------------------ */
  --exv-black: #000000;          /* pure black — primary page bg */
  --exv-ink: #0a0a0a;            /* app surface bg */
  --exv-ink-2: #0f0f0f;          /* raised surface */
  --exv-ink-3: #1a1a1a;          /* menu / dropdown */
  --exv-charcoal: #1C1F22;       /* authority bg / headings on light */
  --exv-steel: #333333;
  --exv-graphite: #555555;
  --exv-gray: #999999;           /* muted sub-headline on dark */

  /* --- Neutrals (light side) ------------------------------ */
  --exv-ivory: #F7F5F1;          /* secondary light bg */
  --exv-bone:  #EFEBE3;
  --exv-white: #FFFFFF;

  /* --- Semantic (dark surface) ---------------------------- */
  --bg:            var(--exv-ink);
  --bg-elevated:   #111111;
  --bg-sunken:     #050505;
  --surface:       rgba(255,255,255,0.02);
  --surface-2:     rgba(255,255,255,0.03);
  --surface-3:     rgba(255,255,255,0.05);
  --surface-hover: rgba(255,255,255,0.06);

  --border:        rgba(255,255,255,0.05);
  --border-2:      rgba(255,255,255,0.10);
  --border-3:      rgba(255,255,255,0.15);

  --fg:            #ffffff;                 /* fg1: primary text */
  --fg-1:          #ffffff;
  --fg-2:          rgba(255,255,255,0.70);  /* body */
  --fg-3:          rgba(255,255,255,0.50);  /* secondary / long-form body */
  --fg-4:          rgba(255,255,255,0.40);  /* muted */
  --fg-5:          rgba(255,255,255,0.30);  /* caption */
  --fg-6:          rgba(255,255,255,0.10);  /* hairline */

  /* --- Semantic (light surface — for docs/print) ---------- */
  --light-bg:       var(--exv-ivory);
  --light-surface:  #ffffff;
  --light-border:   rgba(28,31,34,0.08);
  --light-fg-1:     var(--exv-charcoal);
  --light-fg-2:     rgba(28,31,34,0.72);
  --light-fg-3:     rgba(28,31,34,0.52);
  --light-fg-4:     rgba(28,31,34,0.36);

  /* --- Accent semantics ----------------------------------- */
  --accent:            var(--exv-magenta);
  --accent-hover:      var(--exv-deep-pink);
  --accent-subtle:     rgba(251,47,90,0.10);
  --accent-subtle-2:   rgba(251,47,90,0.20);
  --accent-glow:       rgba(251,47,90,0.25);

  --success: #34d399;
  --danger:  #ef4444;
  --info:    #38bdf8;

  /* --- Radius --------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 9999px;

  /* --- Elevation / Shadow --------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --glow-pink: 0 20px 80px -10px rgba(251,47,90,0.35);
  --glow-amber: 0 20px 80px -10px rgba(251,191,36,0.25);

  /* --- Spacing scale -------------------------------------- */
  --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;

  /* --- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-cinematic: 800ms;

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

  /* Font families */
  --font-display: "Manrope", "Codec Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-brand:   "Codec Pro", "Manrope", sans-serif; /* exact wordmark feel */

  /* Type scale (display-to-caption) */
  --fs-display:  clamp(56px, 8vw, 128px);   /* giant editorial numbers */
  --fs-h1:       clamp(40px, 5.5vw, 80px);  /* hero headline */
  --fs-h2:       clamp(32px, 4vw, 52px);    /* section headline */
  --fs-h3:       clamp(24px, 2.5vw, 32px);  /* block title */
  --fs-h4:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;            /* tiny uppercase tracking label */

  /* Line-heights */
  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-body:  1.6;
  --lh-long:  1.8;

  /* Tracking */
  --tr-tight:    -0.02em;
  --tr-headline: -0.01em;
  --tr-wide:     0.08em;
  --tr-eyebrow:  0.2em;   /* the "PROCESS", "FOCUS AREAS" labels */
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.exv-display,
h1.exv-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.exv-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.exv-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tr-headline);
  color: var(--fg);
}

.exv-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--tr-headline);
  color: var(--fg);
}

.exv-h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}

.exv-body-lg, p.lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.exv-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.exv-body-sm, small {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--fg-4);
}

.exv-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-4);
}

/* The hallmark EX Venture eyebrow label: pink hairline — small caps */
.exv-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--exv-magenta);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.exv-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--exv-magenta);
}

/* Monospace token — stat dividers, process counters "/ 01" */
.exv-mono, code, .exv-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
  color: var(--exv-magenta);
  font-variant-numeric: tabular-nums;
}

/* Stat number style — editorial, big, confident */
.exv-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.exv-stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  margin-top: 4px;
}

/* Brand wordmark treatment (manually typeset "EX VENTURE") */
.exv-wordmark {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}