/* ============================================================
   FitRoom Experience — design tokens
   Change the palette here and it changes everywhere.
   ============================================================ */

/* ---- Self-hosted fonts (Greek + Latin only) ---- */

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-condensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Colour ---- */
  --ink: #131316;
  --deep: #0E0E10;
  --ember: #E4622E;
  --ember-text: #C24A18;   /* 4.7:1 on white — use for small text */
  --brass: #C9A227;
  --muted: #6E6E76;
  --base: #F7F6F4;
  --surface: #FFFFFF;
  --border: #E2E0DC;
  --sand: #EAD9CE;
  --slate: #4A4A55;
  --success: #1A7F37;

  /* Class families — decoration only, never the sole carrier of meaning */
  --family-cross: var(--ink);
  --family-lower: var(--ember);
  --family-tabata: var(--brass);
  --family-athlete: var(--slate);
  --family-best: var(--sand);
  /* Reserved for the Pilates/PT services in the brief. They are valid
     enum values, so they must render properly the day the client adds
     one rather than falling back to an unlabelled swatch. */
  --family-pilates: #4A7C7E;   /* deep teal — reads clinical, distinct from the five above */
  --family-pt: #7A5C8E;        /* muted violet — 1:1 sessions */

  /* ---- Heatmap intensity ladder (admin statistics) ----
     A FIXED ladder of named tokens, not a colour computed per cell. Each cell
     prints its percentage as text on this background, so every step is a
     contrast pair — and a11y_test's sweep can only see a pair when both sides
     are var(--token) in one rule, in a swept sheet. A computed hsl() would be
     invisible to it, which is how .account__badge--warn shipped at 1.42:1.

     --heat-empty is NOT step zero. An hour with no classes scheduled and an
     hour where a class ran and nobody came are different facts, and rendering
     them in the same ink invents an attendance problem at every hour the
     studio is shut.

     --heat-3 is NOT --ember (#E4622E). The plan proposed reusing --ember
     verbatim, and a11y_test.php already pins white-on-#E4622E as FAILING AA
     at 3.45:1 — measured again here before writing any CSS: same 3.45:1.
     Darkened along --ember's own hue/saturation (17°, 77% — an HSL sweep,
     not a guess) to the lightest lightness that still clears 4.5:1, so the
     step stays as close to --ember as the contrast floor allows: #C74B1A,
     4.72:1 on --surface. --heat-4 is left at #C24A18 (== --ember-text, the
     token the primary button already proves safe at 4.90:1) — darkening it
     too would only shrink the room between steps 3 and 4 further. The two
     top steps are visually close (this hue simply has little headroom
     between "passes 4.5:1 on white" and --ember-text), but luminance still
     strictly decreases step 0 -> step 4: measured, not assumed. */
  --heat-empty: #F7F6F4;
  --heat-0: #EDEBE7;
  --heat-1: #EAD9CE;
  --heat-2: #EFB08A;
  --heat-3: #C74B1A;
  --heat-4: #C24A18;

  /* ---- Type ---- */
  --font-display: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.85rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.48rem);
  --step-2:  clamp(1.56rem, 1.43rem + 0.66vw, 1.98rem);
  --step-3:  clamp(1.95rem, 1.72rem + 1.15vw, 2.66rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.93vw, 3.58rem);
  --step-5:  clamp(3.05rem, 2.42rem + 3.15vw, 4.81rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;   /* generous — Greek runs 10-15% longer than English */

  /* ---- Space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Shape ---- */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;
  --radius-pill: 100px;

  --border-thin: 1px solid var(--border);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: var(--space-s);
  --tap-min: 44px;

  --z-header: 100;
  --z-topbar: 110;
  --z-drawer: 200;
}

@media (min-width: 768px) {
  :root { --container-pad: var(--space-m); }
}
@media (min-width: 1280px) {
  :root { --container-pad: var(--space-l); }
}