/* ==========================================================================
   Design Tokens – Cowfoot Core
   ==========================================================================
   Fluid type & spacing scale using clamp().
   Viewport range: 400px → 1400px
   Harmonic ratio: 1.25 (Major Third)
   Base: 1rem (16px) → 1.25rem (20px)

   Formula for fluid values:
     clamp(min, preferred, max)
     preferred = min + (max - min) * ((100vw - 400px) / (1400px - 400px))
     Simplified: clamp(min, calc(min + (max - min) * (100vw - 25rem) / 62.5rem), max)
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     TYPOGRAPHY SCALE
     Ratio: 1.25 (Major Third)
     Each step = previous × 1.25 (up) or previous ÷ 1.25 (down)

     Step       400px vp        1400px vp
     --text-xs   0.64rem (10.2px)   0.80rem (12.8px)
     --text-sm   0.80rem (12.8px)   1.00rem (16.0px)
     --text-base 1.00rem (16.0px)   1.25rem (20.0px)
     --text-md   1.25rem (20.0px)   1.5625rem (25.0px)
     --text-lg   1.5625rem (25.0px) 1.9531rem (31.3px)
     --text-xl   1.9531rem (31.3px) 2.4414rem (39.1px)
     --text-xxl  2.4414rem (39.1px) 3.0518rem (48.8px)
  ----------------------------------------------------------------------- */

  --text-xs:   clamp(0.64rem,   calc(0.64rem   + (0.80   - 0.64)   * (100vw - 25rem) / 62.5), 0.80rem);
  --text-sm:   clamp(0.80rem,   calc(0.80rem   + (1.00   - 0.80)   * (100vw - 25rem) / 62.5), 1.00rem);
  --text-base: clamp(1.00rem,   calc(1.00rem   + (1.25   - 1.00)   * (100vw - 25rem) / 62.5), 1.25rem);
  --text-md:   clamp(1.25rem,   calc(1.25rem   + (1.5625 - 1.25)   * (100vw - 25rem) / 62.5), 1.5625rem);
  --text-lg:   clamp(1.5625rem, calc(1.5625rem + (1.9531 - 1.5625) * (100vw - 25rem) / 62.5), 1.9531rem);
  --text-xl:   clamp(1.9531rem, calc(1.9531rem + (2.4414 - 1.9531) * (100vw - 25rem) / 62.5), 2.4414rem);
  --text-xxl:  clamp(2.4414rem, calc(2.4414rem + (3.0518 - 2.4414) * (100vw - 25rem) / 62.5), 3.0518rem);

  /* -----------------------------------------------------------------------
     SPACING SCALE
     Same ratio (1.25) and viewport range as typography.

     Step        400px vp         1400px vp
     --space-xs   0.64rem (10.2px)   0.80rem (12.8px)
     --space-sm   0.80rem (12.8px)   1.00rem (16.0px)
     --space-base 1.00rem (16.0px)   1.25rem (20.0px)
     --space-md   1.25rem (20.0px)   1.5625rem (25.0px)
     --space-lg   1.5625rem (25.0px) 1.9531rem (31.3px)
     --space-xl   1.9531rem (31.3px) 2.4414rem (39.1px)
     --space-xxl  2.4414rem (39.1px) 3.0518rem (48.8px)
  ----------------------------------------------------------------------- */

  --space-xs:   clamp(0.64rem,   calc(0.64rem   + (0.80   - 0.64)   * (100vw - 25rem) / 62.5), 0.80rem);
  --space-sm:   clamp(0.80rem,   calc(0.80rem   + (1.00   - 0.80)   * (100vw - 25rem) / 62.5), 1.00rem);
  --space-base: clamp(1.00rem,   calc(1.00rem   + (1.25   - 1.00)   * (100vw - 25rem) / 62.5), 1.25rem);
  --space-md:   clamp(1.25rem,   calc(1.25rem   + (1.5625 - 1.25)   * (100vw - 25rem) / 62.5), 1.5625rem);
  --space-lg:   clamp(1.5625rem, calc(1.5625rem + (1.9531 - 1.5625) * (100vw - 25rem) / 62.5), 1.9531rem);
  --space-xl:   clamp(1.9531rem, calc(1.9531rem + (2.4414 - 1.9531) * (100vw - 25rem) / 62.5), 2.4414rem);
  --space-xxl:  clamp(2.4414rem, calc(2.4414rem + (3.0518 - 2.4414) * (100vw - 25rem) / 62.5), 3.0518rem);
}