/* ==========================================================================
   Superior Locksmith — Design tokens
   Brand vocabulary preserved from the existing site: accent #FFD500,
   deep navy panels (rgb 3,25,45), charcoal panels (rgb 31,41,51),
   Inter headings, Heebo body text.
   ========================================================================== */

:root {
  /* ---- Colour: ink / navy ---- */
  --ink-950: #04101C;
  --ink-900: #071A2B;
  --ink-800: #0B2237;
  --ink-700: #123048;
  --ink-600: #1F3A52;
  --charcoal: #1F2933;

  /* ---- Colour: brand accent ---- */
  --brand: #FFD500;
  --brand-bright: #FFE04D;
  --brand-deep: #E0BC00;
  --brand-ink: #6B5500;      /* accent text on light surfaces — AA at 16px */

  /* ---- Colour: surfaces ---- */
  --paper: #FFFFFF;
  --surface: #F6F8FA;
  --surface-2: #EEF2F6;
  --surface-warm: #FBF8EE;

  /* ---- Colour: text ---- */
  --text: #111C28;
  --text-body: #3E4A57;
  --text-muted: #63707E;
  --text-invert: #FFFFFF;
  --text-invert-soft: #C3D0DC;

  /* ---- Colour: lines & states ---- */
  --line: #E2E8EF;
  --line-strong: #CBD5E0;
  --line-invert: rgba(255, 255, 255, 0.14);
  --focus: #1D6FE0;
  --danger: #B3261E;
  --success: #1A6B45;

  /* ---- Typography ---- */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-h4: 1.1875rem;
  --fs-h3: 1.4375rem;
  --fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-h1: clamp(1.9rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-display: clamp(2.05rem, 1.35rem + 3.4vw, 4rem);

  --lh-tight: 1.12;
  --lh-heading: 1.22;
  --lh-body: 1.72;

  --tracking-tight: -0.022em;
  --tracking-eyebrow: 0.16em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;
  --sp-11: 7.5rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --section-y-tight: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter: clamp(1.15rem, 0.7rem + 2vw, 2.5rem);

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation (restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 29, 46, 0.06), 0 2px 8px rgba(11, 29, 46, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 29, 46, 0.07), 0 12px 32px rgba(11, 29, 46, 0.06);
  --shadow-lg: 0 10px 24px rgba(11, 29, 46, 0.09), 0 28px 60px rgba(11, 29, 46, 0.09);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---- Chrome ---- */
  --header-h: 84px;
  --header-h-sm: 68px;
}