/*
 * Design tokens — Slyfox Digital redesign (handoff 2026-09-07).
 *
 * Values are taken verbatim from the handoff README "Design Tokens" section,
 * which in turn follows the July 2026 brand guidelines.
 *
 * Fluid sizes use clamp() exactly as written in the brief. The design was built
 * with container queries (cqw); the theme uses viewport units (vw) instead,
 * because the page container here is the viewport — the computed sizes match at
 * the 1440 and 390 design widths.
 */
:root {
  /* Colour */
  --sf-navy: #26324C;
  --sf-orange: #FF801F;
  --sf-orange-pressed: #E8701A;
  --sf-ink: #20283A;
  --sf-surface: #F4F6F9;
  --sf-border: #E6EAF0;
  --sf-input-border: #C9D0DB;
  --sf-white: #FFFFFF;
  --sf-navy-tile: #1C2538;

  /* Type families */
  --sf-font-head: 'Manrope', Arial, Helvetica, sans-serif;
  --sf-font-body: 'Source Sans 3', Arial, Helvetica, sans-serif;

  /* Type scale */
  --sf-h1-hero: clamp(40px, 6.4vw, 88px);
  --sf-h1-page: clamp(36px, 5vw, 72px);
  --sf-h1-page-sm: clamp(34px, 4.6vw, 64px);
  --sf-h2: clamp(26px, 3vw, 40px);
  --sf-h2-lg: clamp(28px, 3.4vw, 46px);
  --sf-h3-card: 24px;
  --sf-h3-small: 19px;
  --sf-eyebrow: 13px;

  /* Spacing */
  --sf-section-y: clamp(48px, 6vw, 96px);
  --sf-section-y-lg: clamp(56px, 7vw, 110px);
  --sf-hero-y: clamp(56px, 7vw, 100px);
  --sf-hero-y-tall: clamp(64px, 9vw, 150px);
  --sf-gutter: clamp(20px, 5vw, 40px);
  --sf-max: 1200px;
  --sf-max-mega: 1360px;

  /* Radii */
  --sf-r-btn: 6px;
  --sf-r-tile: 10px;
  --sf-r-card: 12px;
  --sf-r-lg: 14px;
  --sf-r-xl: 16px;
  --sf-r-pill: 999px;
  --sf-r-input: 8px;

  /* Shadows */
  --sf-shadow-mega: 0 30px 60px -20px rgba(38, 50, 76, .25);
  --sf-shadow-btn: 0 10px 22px rgba(38, 50, 76, .22);
  --sf-shadow-btn-orange: 0 10px 22px rgba(255, 128, 31, .3);
  --sf-shadow-tile: 0 12px 24px rgba(0, 0, 0, .25);
  --sf-shadow-card: 0 1px 2px rgba(38, 50, 76, .06);
  --sf-shadow-drawer: -20px 0 50px rgba(32, 40, 58, .35);

  /* Motion */
  --sf-t: .2s;
  --sf-t-drawer: .38s cubic-bezier(.4, .1, .2, 1);
  --sf-t-flip: .65s cubic-bezier(.4, .2, .2, 1);

  /* Minimum tap target */
  --sf-tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sf-t: 1ms;
    --sf-t-drawer: 1ms linear;
    --sf-t-flip: 1ms linear;
  }
}