/* ============================================================
   MESH — Colors & Type foundations
   Synthesized from the brand color brainstorm + logo (#345def).
   Fonts loaded via Google Fonts CDN (see README — flagged substitution).
   ============================================================ */

/* Brand faces self-hosted below; Geist Mono (scripts/data) stays on CDN. */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

/* ---------- Arial Nova (body / UI) ---------- */
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova';src:url('fonts/ArialNova-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}

/* ---------- Arial Nova Condensed (display / headings) ---------- */
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Arial Nova Cond';src:url('fonts/ArialNovaCond-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}

:root {
  /* ---------- BRAND BLUE (anchored to the logo: #345def) ---------- */
  --blue-50:  #EEF2FE;
  --blue-100: #DDE6FD;
  --blue-200: #BFCFFB;
  --blue-300: #94AEF7;
  --blue-400: #6486F4;   /* Cornflower */
  --blue-500: #345def;   /* ★ Brand primary — the logo blue */
  --blue-600: #2348D9;   /* Royal — hover/press */
  --blue-700: #1B3AB0;
  --blue-800: #1B327F;
  --blue-900: #1B2C63;

  --brand:        var(--blue-500);
  --brand-hover:  var(--blue-600);
  --brand-press:  var(--blue-700);

  /* ---------- INK / NAVY (dark anchor) ---------- */
  --ink-950: #070D1F;    /* near-black navy — dark sections */
  --ink-900: #0A1124;    /* primary ink / logo "ink" variant */
  --ink-800: #111A35;
  --ink-700: #1B274A;

  /* ---------- COOL NEUTRALS (slightly blue-tinted gray) ---------- */
  --fg-1: #0E1730;       /* primary text */
  --fg-2: #44506C;       /* secondary text */
  --fg-3: #6B7892;       /* muted text / captions */
  --fg-4: #9AA6BC;       /* disabled / placeholder */

  --line-1: #E5E9F2;     /* hairline borders */
  --line-2: #D5DBE8;     /* stronger borders */

  --bg-0: #FFFFFF;       /* base surface */
  --bg-1: #F7F9FD;       /* cool paper / page background */
  --bg-2: #EEF2F9;       /* sunken / inset surface */

  /* ---------- WARM SURFACE (optional accent, from brainstorm) ---------- */
  --cream: #F4F2EA;      /* Cream / Ivory warm surface */

  /* ---------- LIGHT BLUE TINTS ---------- */
  --sky: #E8F1FF;        /* baby blue wash */

  /* ---------- SEMANTIC (deep, sophisticated) ---------- */
  --success:   #15643E;   /* jungle green */
  --success-bg:#E7F1EC;
  --warning:   #8A5712;   /* deep ochre */
  --warning-bg:#F4EBD9;
  --danger:    #9C2C1C;   /* oxblood */
  --danger-bg: #F5E6E2;
  --info:      #1F3FB0;   /* deep cobalt */
  --info-bg:   #E7ECFB;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Arial Nova', Arial, system-ui, sans-serif;        /* headings (Bold) */
  --font-sans:    'Arial Nova', Arial, system-ui, -apple-system, sans-serif;              /* body / UI */
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;                       /* scripts / data */

  /* ---------- TYPE SCALE (1.25 major-third-ish, web) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  80px;

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

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- ELEVATION (soft, cool-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 23, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 23, 48, 0.07);
  --shadow-md: 0 8px 24px rgba(14, 23, 48, 0.09);
  --shadow-lg: 0 20px 48px rgba(14, 23, 48, 0.12);
  --shadow-blue: 0 12px 32px rgba(27, 58, 176, 0.32); /* Blue 700 (#1B3AB0) glow for primary CTAs */
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================ */
.display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
.tabular { font-variant-numeric: tabular-nums; }