/* Raylo design tokens — every design value lives here.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@300;400;500;600;700&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces (warm paper ladder — fixed, never recoloured) ── */
  --bg: #F6F3EF;          /* page paper */
  --surface: #FFFFFF;     /* cards, nav, FAQ rows */
  --surface-2: #F1ECE6;   /* tags, beige bands, icon wells */
  --surface-3: #E4DFD8;   /* portrait backdrops, image placeholders */
  --ink-bg: #291D17;      /* dark story card, dark buttons */
  --ink-bg-2: #3A2B23;    /* hover on dark */

  /* ── Text ── */
  --text: #291D17;        /* headlines + body ink (warm espresso) */
  --text-2: #5E5A56;      /* secondary body */
  --muted: #6E6862;       /* captions, footer labels */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .78);

  /* ── Lines ── */
  --line: #E6E0D8;
  --line-2: #D6CEC4;
  --line-on-dark: rgba(255, 255, 255, .22);

  /* ── Brand / accent (brand slots — the palette engine re-tints these) ── */
  --accent: #F4823B;      /* icons, active nav, stars on light, hover arrows */
  --accent-rgb: 244, 130, 59;
  --accent-ink: #A84A14;  /* accent used as TEXT or small icons on paper (≥ 4.5:1) */
  --accent-soft: #FDEBDD; /* tinted wells */
  --on-accent: #291D17;

  /* ── Data / status ── */
  --star: #F5B400;
  --success: #1E9E4A; --warning: #D98A00; --danger: #D93025; --info: #3B6FE0;
  --g-blue: #2F5BC9; --y-red: #C41E17; --f-blue: #2F5BC9; --g-green: #17803A; /* review-source badges (all ≥ 4.5:1 with white) */

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

  /* ── Radii ── */
  --r-sm: 12px;           /* inputs, small wells */
  --r: 16px;              /* cards, photos, nav bar, FAQ rows */
  --r-lg: 24px;           /* big photo bands, CTA */
  --r-hero: 32px;         /* hero bottom corners */
  --r-pill: 54px;         /* buttons, tags, rating chips */

  /* ── Spacing / layout ── */
  --container: 1272px;
  --container-narrow: 814px;  /* FAQ, forms */
  --gutter: 24px;
  --section: 120px;       /* gap between sections at 1440 */
  --head-gap: 72px;       /* section head → content */
  --card-gap: 16px;

  /* ── Shadows (almost none — the look is flat paper) ── */
  --shadow-1: 0 1px 2px rgba(41, 29, 23, .05);
  --shadow-2: 0 18px 40px -18px rgba(41, 29, 23, .28);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s; --dur-fast: .25s;
}
@media (max-width: 900px) { :root { --section: 88px; --head-gap: 48px; --gutter: 20px; } }
@media (max-width: 560px) { :root { --section: 72px; --head-gap: 36px; --gutter: 16px; } }

/* ── Type scale ── */
.t-display { font-family: var(--font-display); font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -.048em; font-weight: 600; text-wrap: balance; }
.t-h1 { font-family: var(--font-display); font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.05em; font-weight: 600; text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.056em; font-weight: 600; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.3; letter-spacing: -.042em; font-weight: 600; text-wrap: balance; }
.t-h4 { font-family: var(--font-display); font-size: 20px; line-height: 1.4; letter-spacing: -.025em; font-weight: 600; }
.t-lead { font-size: 18px; line-height: 1.5; font-weight: 300; }
.t-body { font-size: 15px; line-height: 1.55; font-weight: 300; }
.t-small { font-size: 14px; line-height: 1.5; font-weight: 300; }
.t-label { font-size: 13px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }

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