/*
 * Casa Lotus — design tokens · v1 · committed 2026-09-28
 * Rules and rationale: docs/design-system.md
 *
 * Palette rule: only colours Ana already uses (sampled from brand/piezas/), so the
 * studio's wall sign and printed material stay valid. Shades of the same hue are allowed.
 *
 * Contrast (WCAG 2.2, computed on --paper unless noted):
 *   ink 10.0 · navy 7.8 · navy-900 11.4 · teal 6.6 · muted 4.7
 *   navy on every class colour ≥ 4.9 · lime on navy 5.3 · paper on navy-900 11.4
 *   sage / wave / blob → decoration only, never text on light backgrounds
 */
:root {
  /* ── Surfaces ───────────────────────────────────────────── */
  --paper:     #F6F8FC;  /* Ana's background in every piece */
  --mist:      #EFF4F8;  /* Ana's pale blue blob: alternate sections */
  --white:     #FFFFFF;  /* cards, raised surfaces */
  --line:      #D6E1E6;  /* hairlines (decorative) */

  /* ── Ink ────────────────────────────────────────────────── */
  --navy:      #165472;  /* brand: logo, headlines, primary buttons */
  --navy-900:  #0E3A4E;  /* shade of navy: dark sections, footer */
  --ink:       #24434C;  /* body text (Ana's "medios de pago" numbers) */
  --muted:     #53748C;  /* secondary text (Ana's line icons) */
  --teal:      #016464;  /* links, hover, active (Ana's "Alístate" disc) */

  /* ── Accents (sparingly) ────────────────────────────────── */
  --lime:      #99E27C;  /* the one bright spot: availability dot, CTA dot, on dark */
  --sage:      #7CAD95;  /* decorative strokes, on dark ≥ 24px */
  --wave:      #A9CBBA;  /* Ana's wave line */
  --blob:      #D0E8DB;  /* Ana's mint blob: atmosphere only */

  /* ── Class code (fields, tags, schedule) ────────────────── */
  --c-multinivel: #B2D4E0; /* Yoga Aéreo multinivel · sky */
  --c-yoga:       #B7DFC5; /* Yoga Aéreo · mint */
  --c-pilates:    #D2F3A2; /* Pilates Aéreo · lime */
  --c-stretch:    #8AD4D6; /* Stretch Aéreo · aqua from Ana's "Condiciones" piece (her pale mint vanished on paper) */

  /* ── Type ───────────────────────────────────────────────── */
  --font-display: "Momo Trust Display", "Momo Trust Sans", system-ui, sans-serif; /* one weight, the logo's face */
  --font-sans:    "Momo Trust Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* 200–800 */

  /* fluid scale 360 → 1440 px viewport */
  --t-hero:   clamp(3.4rem, 1.6rem + 8vw, 10rem);
  --t-h2:     clamp(2.4rem, 1.4rem + 4.4vw, 6rem);
  --t-h3:     clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --t-lead:   clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  --t-body:   clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-small:  0.9375rem;
  --t-label:  0.75rem;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-body:  1.65;
  --tr-display: -0.035em;
  --tr-label:    0.16em;
  --measure:    58ch;

  /* ── Air ────────────────────────────────────────────────── */
  --gutter:   clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --section:  clamp(6rem, 3rem + 12vw, 15rem);
  --gap-xl:   clamp(4rem, 2rem + 6vw, 9rem);
  --gap-l:    clamp(2.5rem, 1.5rem + 3vw, 5rem);
  --gap-m:    clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --gap-s:    1rem;
  --max:      1320px;

  /* ── Shape & depth ──────────────────────────────────────── */
  --r-s:    12px;
  --r-m:    22px;
  --r-l:    36px;
  --r-pill: 999px;
  --shadow-soft: 0 40px 80px -48px rgb(22 84 114 / 0.35);
  --shadow-lift: 0 24px 48px -24px rgb(22 84 114 / 0.28);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);    /* arrivals */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);   /* state changes */
  --ease-breath: cubic-bezier(.37, 0, .63, 1);  /* ambient loops */
  --d-fast: 220ms;
  --d-base: 480ms;
  --d-slow: 900ms;
  --d-breath: 7s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-breath: 0s; }
}