/* ============================================================
   RESTART PILATES — DESIGN TOKENS
   Brand DNA: calm mastery. A sunlit studio, not a gym — soft
   sage and warm cream, an elegant serif for editorial weight,
   generous air around everything. Precision without hardness.
   ============================================================ */

:root {

  /* ---- COLOR: sage / cream / terracotta, each with one job. ---- */

  /* Ink — primary text, primary authority. Soft warm charcoal,
     never pure black, so large fields of it stay gentle. */
  --color-ink: #33352E;
  --color-ink-soft: #6C6F62;      /* de-emphasized text, still AA on bone */

  /* Bone — the studio wall. Warm cream, sunlit, never clinical. */
  --color-bone: #FAF5EA;
  --color-paper: #FFFEFA;         /* cards / raised surfaces only */

  /* Terracotta — the "RestArt" mark. One warm accent, used with
     intent: calls-to-action, active states, star-rating marks. */
  --color-ember: #C17A52;
  --color-ember-dark: #9C5C3B;
  --color-ember-tint: #F1DFCC;    /* accent backgrounds, badges */

  /* Sage — the second accent. Calm, botanical, used for quiet
     emphasis: verified states, secondary badges, soft section tints. */
  --color-sage: #8A9A7E;
  --color-sage-dark: #64735A;
  --color-sage-tint: #E8ECE2;

  /* Slate — secondary neutral for structure: borders, dividers,
     meta text. Warmed toward sage-grey rather than cool blue-grey. */
  --color-slate: #75786C;
  --color-slate-line: #E7DFCC;    /* hairline borders on bone */
  --color-slate-line-paper: #ECE7D9; /* hairline borders on paper */

  /* Signal — safety/caution cues only. A deeper rust, distinct
     from the terracotta accent. Always paired with text. */
  --color-signal: #954A2E;
  --color-signal-tint: #F1DFCC;

  /* ---- TYPOGRAPHY ---- */

  /* Display: an elegant high-contrast serif for editorial weight —
     fine art, not corporate. Body: a clean rounded grotesk built
     for easy reading at length. */
  --font-display: "Playfair Display", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Montserrat", "Lato", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; /* step counters, cue numbers */

  /* Fluid type scale — clamp(min, preferred, max), scales 320px→1440px.
     Headings land in the 32–48px range Beth asked for; body text
     sits at 16–18px. Softer, more compressed than a brutalist scale. */
  --text-2xs:  clamp(0.6875rem, 0.665rem + 0.1vw,  0.75rem);
  --text-xs:   clamp(0.75rem,   0.72rem  + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem  + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem,     0.97rem  + 0.2vw,  1.125rem);
  --text-md:   clamp(1.125rem, 1.08rem  + 0.25vw, 1.25rem);
  --text-lg:   clamp(1.375rem, 1.3rem   + 0.4vw,  1.625rem);
  --text-xl:   clamp(1.625rem, 1.5rem   + 0.7vw,  1.9375rem);
  --text-2xl:  clamp(1.875rem, 1.65rem  + 1.2vw,  2.375rem);
  --text-3xl:  clamp(2.25rem,  1.9rem   + 1.8vw,  2.875rem);
  --text-4xl:  clamp(2.625rem, 2.1rem   + 2.6vw,  3.375rem); /* ~42–54px hero */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.09em;   /* lightly tracked uppercase — nav, subheadings */
  --tracking-wider: 0.17em;

  /* ---- SPACE — fluid scale used for all padding/margin/gap.
     Roomier than a dense product UI: this is the "plenty of
     white space" instruction, encoded as a token scale. ---- */
  --space-3xs: clamp(0.3rem,  0.28rem + 0.1vw,  0.375rem);
  --space-2xs: clamp(0.6rem,  0.55rem + 0.25vw, 0.75rem);
  --space-xs:  clamp(0.9rem,  0.8rem  + 0.45vw, 1.125rem);
  --space-sm:  clamp(1.25rem, 1.1rem  + 0.7vw,  1.625rem);
  --space-md:  clamp(1.875rem, 1.6rem + 1.3vw,  2.5rem);
  --space-lg:  clamp(2.75rem, 2.3rem  + 2.1vw,  3.875rem);
  --space-xl:  clamp(4.25rem, 3.4rem  + 4vw,    6.75rem);
  --space-2xl: clamp(5.75rem, 4.4rem  + 6.5vw,  9.75rem);

  /* ---- STRUCTURE ---- */
  --content-max: 72rem;        /* page-level max width */
  --content-narrow: 42rem;     /* reading-width max, for prose */
  --border-hairline: 1px solid var(--color-slate-line);
  --border-hairline-paper: 1px solid var(--color-slate-line-paper);
  --border-strong: 2px solid var(--color-ink);

  /* Soft, rounded corners — airy rather than precision-edged. */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-pill: 999px; /* pill badges (star rating, tags) */

  /* A diffuse, low-contrast shadow — depth from soft light,
     not hard ink borders. Used sparingly, for floating/sticky UI. */
  --shadow-float: 0 24px 48px -24px rgba(51, 53, 46, 0.22);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 120ms;
  --duration-standard: 240ms;
}

/* Reduced motion: honor it everywhere transitions are used. */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-standard: 0ms; }
}