/* SMB Uplevel — v2 design tokens (Mercury-lane editorial). Homepage first; propagates site-wide later. */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #0F2137;
  --navy-ink: #0A1826;
  --navy-raised: #17304C;
  --orange: #E87722;
  --orange-hover: #D96A15;
  --orange-press: #C65F10;
  --orange-deep: #9C5A35;      /* eyebrow/accent text on ivory (AA-safe) — quieter terracotta shift */
  --orange-lift: #F0A05C;      /* eyebrow/accent text on navy */
  --terracotta: #8A5138;       /* serif step numerals + eyebrows */
  --ivory: #FBFAF7;
  --ivory-raised: #FDFCFA;
  --paper-mid: #F3F1EB;        /* section bands — replaces bg-raised on full-width bands */
  --paper-deep: #ECE9E1;       /* one band max, e.g. #product */
  --charcoal: #1E1E2E;
  --charcoal-muted: #52525E;
  --charcoal-faint: #83837E;
  --green: #18A761;

  /* Grain — SVG fractal noise data-URI, defined once */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Semantic */
  --bg: var(--ivory);
  --bg-raised: var(--ivory-raised);
  --bg-dark: var(--navy);
  --bg-ink: var(--navy-ink);
  --fg: var(--charcoal);
  --fg-muted: var(--charcoal-muted);
  --fg-faint: var(--charcoal-faint);
  --fg-on-dark: #F7F5F0;
  --fg-on-dark-muted: rgba(247,245,240,0.72);
  --fg-on-dark-faint: rgba(247,245,240,0.55);
  --accent: var(--orange);
  --line: #E6E2D8;
  --line-strong: #D8D3C6;
  --line-on-dark: rgba(255,255,255,0.10);
  --border: rgba(15,33,55,0.08);
  --focus-ring: 0 0 0 3px rgba(232,119,34,0.35);
  --shadow-card: 0 24px 48px -16px rgba(15,33,55,0.35);
  --shadow-figure: 0 32px 64px -24px rgba(15,33,55,0.25);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(48px, 7vw, 92px);      /* hero H1 */
  --fs-h2: clamp(32px, 4vw, 48px);
  --fs-h3: clamp(21px, 2.2vw, 26px);
  --fs-eyebrow: 12px;
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;

  --lh-display: 1.03;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.14em;

  /* Fraunces voice: high optical size, soft, no wonk */
  --fraunces-settings: 'opsz' 100, 'SOFT' 60, 'WONK' 0;
  --fw-display: 420;

  /* Rhythm */
  --space-section: clamp(96px, 12vw, 160px);
  --space-block: clamp(40px, 5vw, 64px);
  --container: 1120px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 10px;
  --radius-lg: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover: 180ms;
  --t-reveal: 500ms;
}