/* ==========================================================================
   Rivexo Athletics - design tokens
   Clean editorial light: white and neutral grey, pure glossy black, one
   rationed red.
   Saira carries the headlines, Inter does the reading.

   Every colour, size and rhythm value used in the theme is declared here.
   To rebrand the site, change this file and nothing else.
   ========================================================================== */

:root {

  /* --- Colour -------------------------------------------------------------
     Contrast ratios are measured against white unless noted, so any
     replacement can be checked against the same numbers.                   */

  --white:       #FFFFFF;
  --paper:       #F4F4F4;   /* neutral grey section surface, no colour cast */
  --paper-2:     #E9E9E9;   /* one step deeper, for swatch and image wells */

  --ink:         #000000;   /* pure black: body text and dark sections (21:1) */
  --ink-raise:   #0A0A0A;   /* a panel sitting on black, barely lifted off it */
  --ink-80:      #2B2B2B;   /* headings on paper (14.2:1) */
  --ink-60:      #5C5C5C;   /* secondary text (6.7:1) */
  --ink-40:      #8E8E8E;   /* large or non-essential text only (3.3:1) */

  --line:        #E3E3E3;   /* hairline rules and card borders */
  --line-strong: #C7C7C7;   /* rules that need to be seen */

  /* The gloss. A short highlight falling off over the first 160px of any
     large black surface, so it reads as lacquered rather than flat, without
     banding down a tall section the way a full-height gradient would. */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 90px, rgba(255, 255, 255, 0) 190px);
  --gloss-edge: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  --red:         #C8102E;   /* the only accent (5.9:1 on white, 5.9:1 under white text) */
  --red-deep:    #9E0C24;   /* hover and pressed states */
  --red-wash:    #FCEFF1;   /* barely-there tint for highlighted rows */

  /* On dark sections */
  --on-dark:     #FFFFFF;
  --on-dark-60:  #ABABAB;   /* secondary text on black (9.1:1) */
  --dark-line:   #242424;

  --focus:       #0B5FFF;   /* reads clearly against both white and red */

  --ok:          #0F7B43;
  --ok-wash:     #EDF6F0;

  /* --- Type ---------------------------------------------------------------
     Saira is a squared, athletic grotesque with a width axis - condensed it
     reads like teamwear lettering, at normal width it still works on a card.
     Inter does all the reading. Two families, clearly distinct.            */

  --font-display: 'Saira', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Saira's width axis. Condensed for display type, the way a squad number
     or a team name is set on a jersey; near-normal for smaller headings so
     they stay readable at card size. */
  --wd-tight:     80%;
  --wd-normal:    96%;

  /* Modular scale, ratio 1.25, fluid between 380px and 1400px viewports */
  --step--2: clamp(0.72rem, 0.71rem + 0.06vw, 0.76rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.11vw, 0.91rem);
  --step-0:  clamp(1rem,    0.97rem + 0.17vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.12rem + 0.28vw, 1.36rem);
  --step-2:  clamp(1.4rem,  1.3rem + 0.46vw, 1.7rem);
  --step-3:  clamp(1.67rem, 1.51rem + 0.73vw, 2.13rem);
  --step-4:  clamp(1.98rem, 1.74rem + 1.11vw, 2.66rem);
  --step-5:  clamp(2.36rem, 2rem + 1.7vw, 3.32rem);
  --step-6:  clamp(2.8rem,  2.25rem + 2.6vw, 4.16rem);
  --step-7:  clamp(3.2rem,  2.2rem + 4.6vw, 5.8rem);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  /* --- Space -------------------------------------------------------------- */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* Generous vertical rhythm - the air is the point in this direction */
  --section-y: clamp(4rem, 2.25rem + 8vw, 8.5rem);

  /* --- Layout ------------------------------------------------------------- */

  --container:        84rem;   /* 1344px */
  --container-narrow: 48rem;
  --gutter:           clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);
  --measure:          68ch;

  --radius:       6px;
  --radius-lg:    14px;   /* cards, softened */
  --hairline:     1px;

  --shadow-card:  0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-lift:  0 12px 28px -12px rgba(17, 17, 17, 0.18);

  /* --- Motion -------------------------------------------------------------
     One expressive curve for things entering, one snappy curve for things
     responding to a click, one springy curve for the few moments that should
     feel physical. Everything is disabled under prefers-reduced-motion.    */

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);      /* expo out, for reveals */
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);   /* slight overshoot */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* The softest curve in the set: almost no acceleration at either end, so
     anything using it appears to glide rather than start and stop. Reserved
     for the large surfaces - the card wash, the image push. */
  --ease-soft:   cubic-bezier(0.33, 0.02, 0, 1);

  --dur-fast: 160ms;
  --dur:      360ms;
  --dur-slow: 640ms;
  --dur-xl:   900ms;
  --dur-wash: 720ms;   /* the red flood across a card */
}