/* Ferlo design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@300..500&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #0A0A0B;            /* page: near-black, every band */
  --surface: #161616;       /* raised cards: process card, FAQ rows, form panel, footer card */
  --surface-2: #222222;     /* inputs and wells inside a surface card */
  --paper: #F0ECE5;         /* warm bone: arrow buttons, logo chips on photos */
  --white: #FFFFFF;         /* header pill, mega menu, primary buttons */
  --shade: rgba(10, 10, 11, .62);   /* photo scrim under text */
  --shade-soft: rgba(10, 10, 11, .28);

  /* ── Text ── */
  --text: #FFFFFF;          /* headlines and body on dark */
  --text-2: #F7F5F0;        /* secondary text on photos */
  --muted: #C9C5C1;         /* roles, captions, footer links, small text */
  --dim: #8A8784;           /* inactive service titles, counters */
  --ink: #0A0A0B;           /* text on white and on bone */
  --ink-2: #161616;         /* nav links on the white pill */
  --brown: #210E03;         /* fine strokes on bone chips */
  --ink-muted: #6B6763;     /* mega menu column labels */
  --ink-soft: #4A4643;      /* mega menu quote */
  --ink-hover: #262626;     /* ink button hover */

  /* ── Lines ── */
  --line: rgba(255, 255, 255, .10);   /* hairlines: hero rule, logo grid, tabs, footer rules */
  --line-2: rgba(255, 255, 255, .18); /* outline buttons */
  --line-ink: rgba(10, 10, 11, .10);  /* hairlines on white */
  --line-brown: rgba(33, 14, 3, .10); /* arrow button ring */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #EF523C;        /* ember: label dots, active nav link, active tab dot, arrow icons, logo mark */
  --accent-rgb: 239, 82, 60;
  --accent-ink: #EF523C;    /* accent used as text on dark (passes 4.5:1 on --bg) */
  --accent-ink-light: #C93A24; /* accent as text on white (nav hover/active) */
  --on-accent: #FFFFFF;

  /* ── Data / status (forms only) ── */
  --success: #3FA36B; --warning: #D9A23A; --danger: #E5484D; --info: #4C8DFF;

  /* ── Fonts ── */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 4px;    /* checkbox, tiny chips */
  --r-sm: 8px;    /* photos, cards, inputs, logo chips */
  --r: 12px;      /* header pill, mega menu, form panel */
  --r-lg: 16px;   /* process card, footer card */
  --r-pill: 40px; /* buttons, tab pills, newsletter field */
  --r-round: 9999px;

  /* ── Spacing / layout ── */
  --container: 1524px;      /* content width at 1600; fluid below */
  --gutter: 30px;           /* page side padding (16px on phones) */
  --section: 130px;         /* vertical padding of a band */
  --gap: 16px;              /* card grid gap */
  --head-gap: 16px;         /* label → headline */
  --head-to-content: 72px;  /* headline block → content */
  --nav-w: 673px;           /* floating header pill width */

  /* ── Shadows (flat design; only floating white things get one) ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .18);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, .35);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .25s;
}

/* ── Type scale (desktop values from the design; phone sizes in ferlo.css) ── */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: -2.5px; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: .95; letter-spacing: -2.5px; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -2px; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -.5px; }
.t-stat { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -2px; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.45; }
.t-nav { font-family: var(--font); font-weight: 500; font-size: 12px; line-height: 1.5; }
.t-label { font-family: var(--mono); font-weight: 400; font-size: 11px; line-height: 1.2; letter-spacing: .75px; text-transform: uppercase; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }