/* ==========================================================================
   UVFIT — design tokens
   Palette derived from the studio itself: the rooms are pink, the reformer
   studio is bone-white, and the building looks out over the Mediterranean.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --bone:        #F7F3F1;  /* page canvas — warm off-white with a rose cast */
  --bone-deep:   #EFE8E4;  /* alternating band */
  --ink:         #16121A;  /* text + dark bands, near-black with a violet cast */
  --ink-soft:    #4A4350;  /* secondary text */
  --ink-mute:    #655D6C;  /* captions, meta — 5.7:1 on bone */
  --pink:        #F2295B;  /* her brand pink, unchanged */
  --pink-ink:    #D6154B;  /* the same pink, darkened just enough to carry
                              white text at AA (5.2:1). Used only where text
                              sits on pink; hairlines and dots stay --pink. */
  --pink-deep:   #B01340;  /* pink text on light surfaces (6.3:1) */
  --pink-wash:   #FCE9EE;  /* tint fill */
  --sea:         #1F4B4A;  /* the view from the studio */
  --sand:        #E3D9D2;  /* hairlines and dividers */
  --white:       #FFFFFF;

  /* ---- discipline colours: warm = strength, cool = pilates ----
     Each has a -text pair: the vivid value carries bars, dots and rules,
     the -text value carries small labels and clears 4.5:1 on bone. */
  --c-functional:      #F2295B;
  --c-functional-text: #C4123F;   /* 5.4:1 */
  --c-toning:          #8A2F52;
  --c-toning-text:     #8A2F52;   /* 7.3:1 already */
  --c-equipment:       #1F4B4A;
  --c-equipment-text:  #1F4B4A;   /* 8.8:1 already */
  --c-mat:             #6E8B7E;
  --c-mat-text:        #3F6152;   /* 6.3:1 */

  /* ---- type ----
     One family across the whole site. Hierarchy comes from weight, size and
     tracking rather than from a second face. */
  --font-display: "Assistant", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Assistant", "Helvetica Neue", Arial, sans-serif;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.4rem + 1.2vw, 2.35rem);
  --step-4:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-5:  clamp(2.3rem, 1.55rem + 3.4vw, 4.2rem);
  --display: clamp(2.9rem, 1.2rem + 7.8vw, 7.2rem);

  /* ---- spacing ---- */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.75rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* ---- layout ---- */
  --measure: 62ch;
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 74px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;
}

@media (max-width: 700px) {
  :root { --header-h: 62px; }
}

/* Discipline theming. Set one of these on any block that carries a class's
   colour, instead of writing the pair out inline every time. */
.t-functional { --accent: var(--c-functional); --accent-text: var(--c-functional-text); }
.t-toning     { --accent: var(--c-toning);     --accent-text: var(--c-toning-text); }
.t-equipment  { --accent: var(--c-equipment);  --accent-text: var(--c-equipment-text); }
.t-mat        { --accent: var(--c-mat);        --accent-text: var(--c-mat-text); }
.t-pink       { --accent: var(--pink);         --accent-text: var(--pink-deep); }