/* Design tokens: Infinity Sports Massage
   Started from Salon Model/themes/clean-sage.css, then matched to their logo (Facebook profile, Oct 2026):
   the Vitruvian figure is #0093CB on white, the lockup sits on black, the tagline is a lighter blue.
   Display type is condensed and athletic; the wordmark uses Courier Prime to echo the logo's typewriter lettering.
   Fonts link in index.html: Barlow Condensed (display), Barlow (body), Courier Prime (wordmark). */

:root {
  color-scheme: light;

  /* Colour */
  --c-porcelain: #F3F6F8;          /* page background */
  --c-blush: #E3EEF5;              /* soft accent surface */
  --c-petal: #D0E3EF;              /* deeper accent surface */
  --c-linen: #EAF0F4;              /* alternate section surface */
  --c-paper: #FBFCFD;              /* cards */
  --c-ink: #0E1620;                /* text and dark sections */
  --c-cocoa: #0D141B;              /* dark panels, close to the black behind their logo */
  --c-rose: #006A96;               /* accent text, links, buttons: their blue darkened to 5.5:1 on the page colour */
  --c-rose-soft: #8CC4E0;          /* decorative linework only, never body text */
  --c-gold: #3FB1E5;               /* their blue, lifted for text and lines on dark surfaces (7.5:1) */
  --c-brand: #0093CB;              /* the logo blue itself */
  --c-muted: #4E5B66;              /* supporting text (6.4:1) */
  --c-line: rgba(14, 22, 32, 0.12);
  --c-line-strong: rgba(14, 22, 32, 0.26);
  --c-on-dark: #E9F3F9;
  --c-on-dark-muted: rgba(233, 243, 249, 0.76);
  --c-line-dark: rgba(233, 243, 249, 0.18);
  --c-error: #A3312A;
  --c-open: #1F6B4A;

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", system-ui, sans-serif;
  --font-mark: "Courier Prime", "Courier New", monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-h4: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem);
  --fs-h3: clamp(1.95rem, 1.5rem + 1.8vw, 3rem);
  --fs-h2: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
  --fs-display: clamp(3.3rem, 1.8rem + 6vw, 7.25rem);
  --lh-tight: 1;
  --lh-snug: 1.05;
  --lh-body: 1.65;
  --tracking-label: 0.2em;

  /* Space and layout */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 5vw, 60px);
  --header-h: 72px;
  --space-section: clamp(5.5rem, 3.5rem + 7.5vw, 10.5rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Shape: soft clinical rectangles rather than the salon arch */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --arch: var(--radius-lg);

  /* Depth */
  --shadow-soft: 0 40px 70px -48px rgba(10, 30, 48, 0.55);
  --shadow-card: 0 1px 0 rgba(14, 22, 32, 0.05), 0 26px 50px -38px rgba(10, 30, 48, 0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --dur-slower: 1.25s;
  --reveal-distance: 30px;

  /* Names the booking window already uses. Keep these mapped to the tokens above. */
  --blush: var(--c-blush);
  --petal: var(--c-petal);
  --paper: var(--c-paper);
  --ink: var(--c-ink);
  --rose: var(--c-rose);
  --muted: var(--c-muted);
  --line: var(--c-line);
  --error: var(--c-error);
  --open: var(--c-open);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}