/*
  Strata Match — Colors & Type tokens
  ─────────────────────────────────────
  Editorial type system. Self-hosted variable fonts.

    Instrument Serif   — display (high-contrast Didone; headlines, stats)
    Newsreader         — body (variable serif; editorial warmth, readable long-form)
    JetBrains Mono     — meta (eyebrow, data, labels; variable axis)

  Typographic features in use:
    – tabular-nums + slashed-zero on stats, benchmarks, calculators
    – oldstyle-nums in body prose
    – discretionary ligatures in display
    – hanging quotes on pullquotes
*/

/* ─────────────────────────── @font-face ─────────────────────────── */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

/* Newsreader — variable axis wght 200–800 */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
}

/* JetBrains Mono — variable axis wght 100–800 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-wght-italic.woff2') format('woff2-variations');
}

:root {
  /* ─────────────────────────────── Type ─────────────────────────────── */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — editorial ratio (1.333 / perfect fourth above body) */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
  --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-60: 60px; --fs-72: 72px; --fs-96: 96px;

  /* Optical weights for Newsreader variable */
  --w-body:     380;   /* slightly lighter than regular — editorial feel */
  --w-body-em:  560;   /* semibold-ish */
  --w-body-b:   620;

  /* ─────────────────────────── Neutral (Ink) ────────────────────────── */
  --ink-50:  #FAF8F3;
  --ink-100: #F1EEE5;
  --ink-200: #E0DCCE;
  --ink-300: #BDB8A6;
  --ink-400: #827E6F;
  --ink-500: #55524A;
  --ink-600: #38362F;
  --ink-700: #242320;
  --ink-800: #141411;
  --ink-900: #0A0A08;

  /* ─────────────────────────── Primary (Navy) ───────────────────────── */
  --primary-50:  #EDF3FB;
  --primary-100: #D3E1F2;
  --primary-200: #A2BFE0;
  --primary-300: #6F98C8;
  --primary-400: #3F6FAE;
  --primary-500: #23528F;
  --primary-600: #1B4274;
  --primary-700: #153459;
  --primary-800: #0D2340;
  --primary-900: #07172B;

  /* ─────────────────────────── Accent (Terracotta) ──────────────────── */
  --accent-50:  #FDF1E9;
  --accent-100: #FADDCA;
  --accent-400: #E78549;
  --accent-500: #D46A2E;   /* canonical */
  --accent-600: #B85522;
  --accent-700: #8F3E17;

  /* ─────────────────────────── Ground (Surface) ─────────────────────── */
  --ground-900: #050D1E;
  --ground-800: #0B1830;
  --ground-700: #142340;
  --ground-600: #1E3154;

  /* ─────────────────────────── Semantic ─────────────────────────────── */
  --surface:  var(--ground-900);
  --text:     var(--ink-50);
  --text-mute:var(--ink-300);
  --text-dim: var(--ink-400);
  --border:   var(--ground-600);
  --hairline: rgba(30, 49, 84, 0.7);
  --hairline-light: rgba(224, 220, 206, 0.35);
  --success:  #15803D;
  --warning:  #B45309;
  --danger:   #B91C1C;

  /* Directory tag palette */
  --tag-blue-bg:   var(--primary-50);   --tag-blue-fg:   var(--primary-700);
  --tag-green-bg:  #ECFDF5;             --tag-green-fg:  #065F46;
  --tag-orange-bg: var(--accent-50);    --tag-orange-fg: var(--accent-700);
  --tag-purple-bg: #F3E8FF;             --tag-purple-fg: #6B21A8;

  /* Spacing — on an 8px grid, extended for editorial margins */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-80: 80px; --s-112: 112px; --s-160: 160px;

  /* Radii */
  --r-none: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;

  /* Grain — tiny SVG noise overlay (URL-encoded) for dark editorial surfaces */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.98  0 0 0 0 0.95  0 0 0 0 0.89  0 0 0 0.042 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─────────────────────── Base ────────────────────── */

html {
  background: var(--ground-900);
  color: var(--ink-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--w-body);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-100);
  font-feature-settings: "kern", "liga", "calt", "onum"; /* old-style figures in prose */
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Display family — tighter tracking, high contrast, discretionary ligatures */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--ink-50);
  margin: 0;
  font-feature-settings: "kern", "liga", "dlig";
}
h1 { font-size: clamp(44px, 5.8vw, 84px); letter-spacing: -0.02em; line-height: 0.98; }
h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.018em; line-height: 1.02; }
h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.012em; }
h4 { font-size: var(--fs-20); letter-spacing: -0.01em; }

p { margin: 0; color: var(--ink-200); }

em, i, .italic {
  font-style: italic;
  font-family: var(--font-sans);
}
.display-italic { font-family: var(--font-display); font-style: italic; }

/* ─────────────────────── Typographic utilities ────────────────────── */

/* Eyebrow — mono small-caps feel, editorial grid caption */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.eyebrow-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-400);
}

/* Stat — display numerals, tabular+lining for alignment */
.stat,
.stat-lg {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-50);
  font-variant-numeric: lining-nums tabular-nums slashed-zero;
  font-feature-settings: "tnum", "lnum", "zero";
  letter-spacing: -0.02em;
}
.stat    { font-size: var(--fs-32); line-height: 1; }
.stat-lg { font-size: var(--fs-60); line-height: 0.95; }

/* Pullquote — the editorial tension line */
.pullquote,
.pullquote-thick {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  hanging-punctuation: first;
}
.pullquote       { border-left: 1px solid var(--accent-500); padding-left: 18px; }
.pullquote-thick { border-left: 2px solid var(--accent-500); padding-left: 22px; }

/* Meta row — author · date · updated */
.meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.meta-row .sep { color: var(--ink-600); user-select: none; }
.meta-row .accent { color: var(--accent-400); }

/* Tabular number utility — for calculators, fee tables, rankings */
.tnum { font-variant-numeric: tabular-nums lining-nums slashed-zero; font-feature-settings: "tnum", "lnum", "zero"; }

/* Drop-cap (editorial long-form) */
.drop-cap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  color: var(--accent-500);
}

/* Hairlines — the editorial spine of the whole system */
.rule        { border: 0; height: 1px; background: var(--hairline); margin: 0; }
.rule-light  { border: 0; height: 1px; background: var(--hairline-light); margin: 0; }
.rule-accent { border: 0; height: 1px; background: var(--accent-500); margin: 0; }
.rule-double { border: 0; height: 4px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.rule-double-accent { border: 0; height: 4px;
  border-top: 1px solid var(--accent-500);
  border-bottom: 1px solid var(--accent-500);
}

/* Grain overlay — apply as a ::after on dark sections for paper feel */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.45;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* Cream (light) section utility */
.section-cream {
  background: var(--ink-50);
  color: var(--ink-900);
}
.section-cream p { color: var(--ink-600); }
.section-cream h1, .section-cream h2, .section-cream h3, .section-cream h4 { color: var(--ink-900); }

/* Figure number — editorial "FIG. 01" */
.fig-no {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-400);
  font-variant-numeric: tabular-nums;
}

/* Selection */
::selection { background: var(--accent-500); color: var(--ink-50); }

/* ─────────────────────── Section gradients & textures ────────────────────── */

/* Subtle radial atmosphere for the hero — warm primary glow top-left,
   fading to ground-900. Adds depth without looking like SaaS gradient slop. */
.bg-hero {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(31, 64, 119, 0.28), transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(212, 106, 46, 0.06), transparent 50%),
    var(--ground-900);
}

/* Warm-navy section (testimonial, pain points variant) */
.bg-warm-navy {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(63, 111, 174, 0.18), transparent 55%),
    var(--primary-900);
}

/* Deeper editorial dark — for secondary dark sections */
.bg-dim {
  background:
    linear-gradient(180deg, var(--ground-800) 0%, var(--ground-900) 100%);
}

/* Cream section with subtle vertical tone shift */
.bg-cream {
  background:
    linear-gradient(180deg, var(--ink-50) 0%, var(--ink-100) 100%);
  color: var(--ink-900);
}

/* Paper-noise texture overlay — apply with a wrapper. Adds editorial grit. */
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  z-index: 0;
}
.noise > * { position: relative; z-index: 1; }

/* Soft accent rule — a gradient hairline that fades out from the left */
.rule-soft {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-500) 0%, transparent 60%);
}

/* Glow ring for circular badges (step numbers, icon wells) */
.glow-ring {
  background:
    radial-gradient(circle at 30% 30%, var(--accent-400) 0%, var(--accent-500) 50%, var(--accent-600) 100%);
  box-shadow: 0 0 0 1px rgba(212, 106, 46, 0.3), 0 8px 24px -8px rgba(212, 106, 46, 0.5);
}

/* Icon well — small bordered square holding an SVG icon */
.icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent);
  color: var(--accent-400);
  flex-shrink: 0;
}
.icon-well.on-cream {
  border: 1px solid var(--ink-200);
  background: linear-gradient(135deg, rgba(0,0,0,0.03), transparent);
  color: var(--accent-600);
}