/* Covra design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..700&family=Instrument+Sans:wght@400..700&family=Red+Hat+Display:wght@300..900&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;            /* page */
  --paper: #F6F8ED;         /* soft sage band: why-us, reviews, process, footer, card wells */
  --surface: #FFFFFF;       /* cards on paper */
  --surface-2: #EFF0E9;     /* icon wells, FAQ rows, prev arrow */
  --dark: #292B22;          /* deep olive band (numbers, benefits) and dark arrow */
  --dark-card: rgba(255, 255, 255, .08);  /* glass card on the dark band */
  --dark-line: rgba(255, 255, 255, .10);
  --scrim: rgba(0, 0, 0, .40); /* photo CTA overlay */

  /* ── Text ── */
  --text: #171714;          /* ink: headlines, buttons */
  --text-2: #434338;        /* labels, small text */
  --muted: #5E5E55;         /* body copy (the design's #434338 at 80%, made solid) */
  --on-dark: #FFFFFF;
  --on-dark-2: #DADAD3;     /* body on the dark band (white at 80%, made solid) */

  /* ── Lines ── */
  --line: rgba(58, 28, 10, .12);   /* outline buttons, inputs */
  --line-2: rgba(58, 28, 10, .08); /* icon tiles */
  --rule: #D9DACF;                 /* footer rules */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #CE3700;        /* ember: plus marks, stars, step pills, service button, active link */
  --accent-rgb: 206, 55, 0;
  --accent-ink: #CE3700;    /* accent used as text on light */
  --on-accent: #FFFFFF;
  --lime: #E9FA49;          /* second brand colour: only on dark/photo (plus mark, stat icons, CTA button) */
  --on-lime: #171714;

  /* ── Data / status (forms + mock-ups only) ── */
  --success: #2F7D4F; --warning: #B7791F; --danger: #C0392B; --info: #2F5D8A;

  /* ── Fonts ── */
  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Instrument Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --w-light: 300; --w-medium: 467; --w-bold: 645;

  /* ── Radii ── */
  --r-xs: 10px;   /* icon tile */
  --r-sm: 12px;   /* inner panel, photo inside a card */
  --r: 16px;      /* cards, FAQ rows, hero photo */
  --r-lg: 24px;   /* big photos, stat + why cards */
  --r-xl: 40px;   /* hero frame */
  --r-pill: 32px; /* buttons, nav pill */
  --r-round: 9999px;

  /* ── Spacing / layout ── */
  --container: 1272px;
  --gutter: 24px;
  --section: 130px;         /* vertical padding of a band */
  --gap: 20px;              /* card grid gap */
  --head-gap: 16px;         /* eyebrow → headline */
  --head-to-content: 60px;  /* headline block → cards */
  --nav-h: 48px;

  /* ── Shadows (the design is flat; only floating cards get one) ── */
  --shadow-1: 0 1px 2px rgba(23, 23, 20, .04), 0 8px 24px rgba(23, 23, 20, .06);
  --shadow-2: 0 18px 50px rgba(23, 23, 20, .14);

  /* ── 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 covra.css) ── */
.t-display { font-family: var(--font-display); font-weight: var(--w-light); font-size: 72px; line-height: 1.06; letter-spacing: -1.5px; }
.t-h1 { font-family: var(--font-display); font-weight: var(--w-light); font-size: 64px; line-height: 1.14; letter-spacing: -2.4px; }
.t-h2 { font-family: var(--font-display); font-weight: var(--w-light); font-size: 32px; line-height: 1.3; letter-spacing: -1.4px; }
.t-h3 { font-family: var(--font-display); font-weight: var(--w-light); font-size: 24px; line-height: 1.33; letter-spacing: -.4px; }
.t-stat { font-family: var(--font-display); font-weight: var(--w-light); font-size: 64px; line-height: 1.14; letter-spacing: -2.4px; }
.t-stat-sm { font-family: var(--font-display); font-weight: var(--w-light); font-size: 48px; line-height: 1.33; letter-spacing: -.5px; } /* numbers inside small cards, the 48px about statement */
.t-lead { font-family: var(--font); font-weight: var(--w-medium); font-size: 20px; line-height: 1.6; letter-spacing: -.2px; }
.t-body { font-family: var(--font); font-weight: var(--w-medium); font-size: 18px; line-height: 1.6; letter-spacing: -.2px; }
.t-small { font-family: var(--font); font-weight: var(--w-medium); font-size: 16px; line-height: 1.5; letter-spacing: -.25px; }
.t-label { font-family: var(--font-label); font-weight: 500; font-size: 14px; line-height: 1.7; letter-spacing: .6px; text-transform: uppercase; }
.t-button { font-family: var(--font); font-weight: var(--w-bold); font-size: 18px; line-height: 1.6; letter-spacing: -.2px; }

/* ── 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; }