/* =========================================================
   Parallex — Colors & Type
   Voice: clarity over hype. Professional, direct, B2B.
   Visuals: deep ink + vivid electric accent, geometric sans,
   mono for data/labels. Editorial whitespace.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Core palette ---------- */
  /* Ink — primary surface / text */
  --ink-1000: #05070E;  /* near-black, brand anchor */
  --ink-900:  #0B0F1A;  /* hero bg */
  --ink-800:  #111725;  /* elevated surface */
  --ink-700:  #1B2233;  /* card / divider on dark */
  --ink-600:  #2A3142;  /* muted border on dark */

  /* Neutrals — light surfaces */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF7;  /* page bg — warm off-white */
  --neutral-100: #F3F2ED;
  --neutral-200: #E8E6DE;
  --neutral-300: #D4D1C5;
  --neutral-400: #9A988C;
  --neutral-500: #6B6A60;
  --neutral-600: #4A4A44;
  --neutral-700: #2E2E2A;

  /* Accent — Signal (vivid electric) */
  --signal-500: #2E5BFF;   /* primary accent — calls to action */
  --signal-600: #1E3FD9;   /* hover / pressed */
  --signal-400: #5B7EFF;   /* light accent */
  --signal-100: #E4EAFF;   /* tint */

  /* Accent secondary — Ember (warm, human, rarely used) */
  --ember-500: #E85D3B;
  --ember-100: #FCE4DB;

  /* Semantic */
  --success-500: #1F9D55;
  --warning-500: #C77700;
  --danger-500:  #C43636;

  /* ---------- Semantic tokens (light) ---------- */
  --bg:            var(--neutral-50);
  --bg-elevated:   var(--neutral-0);
  --bg-subtle:     var(--neutral-100);
  --bg-inverse:    var(--ink-1000);

  --fg:            var(--ink-1000);
  --fg-muted:      var(--neutral-500);
  --fg-subtle:     var(--neutral-400);
  --fg-inverse:    var(--neutral-50);
  --fg-accent:     var(--signal-500);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-inverse:var(--ink-600);

  /* ---------- Type families ---------- */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(56px, 8vw, 128px);
  --fs-display-l:  clamp(44px, 6vw, 88px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-h1:         clamp(32px, 3.6vw, 48px);
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tr-tighter: -0.03em;
  --tr-tight:   -0.015em;
  --tr-normal:  0;
  --tr-wide:    0.08em;
  --tr-wider:   0.14em;

  /* ---------- Spacing (8pt base w/ 4pt half-steps) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- Radii ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(5,7,14,0.04), 0 1px 2px rgba(5,7,14,0.04);
  --shadow-2: 0 2px 6px rgba(5,7,14,0.06), 0 1px 2px rgba(5,7,14,0.04);
  --shadow-3: 0 12px 32px -8px rgba(5,7,14,0.12), 0 4px 8px -2px rgba(5,7,14,0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 720px;
  --grid-gutter: 24px;
}

/* ---------- Dark context (for inverted sections) ---------- */
.parallex-dark {
  --bg:            var(--ink-900);
  --bg-elevated:   var(--ink-800);
  --bg-subtle:     var(--ink-800);
  --bg-inverse:    var(--neutral-50);
  --fg:            var(--neutral-50);
  --fg-muted:      #9AA0AE;
  --fg-subtle:     #6A7080;
  --fg-inverse:    var(--ink-1000);
  --border:        var(--ink-700);
  --border-strong: var(--ink-600);
  color: var(--fg);
  background: var(--bg);
}

/* =========================================================
   Base semantic styles
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
}
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); }

.display-xl { font-size: var(--fs-display-xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); }
.display-l  { font-size: var(--fs-display-l);  font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); }
.display-m  { font-size: var(--fs-display-m);  font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); }

.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--fg-muted);
}

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

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-accent); }