/* ==========================================================================
   Ventura Fitness Club - design tokens (LIGHT THEME, version1)

   ONE SYSTEM. Everything below is a lever the whole site pulls on: measure,
   gutter, section rhythm, radii, shadows, card padding, button heights, type
   scale, motion. If a section needs a value, it asks for a token here rather
   than inventing one, which is what keeps nine sections reading as one page.

   THE COLOUR CONTRACT, unchanged in spirit and tightened in practice:

     PAPER   the ground. White and two very light greys. Most of the page.
     ROYAL   reserved for THREE brand moments only: the statement, the
             membership block and the footer. Blue is punctuation now, not
             wallpaper: it was the background of half the page and the page
             read as heavy because of it.
     LIME    actions, active states, and a short closed list of accents:
             the hero rules, list markers, the number chips.

   Lime is never a surface and never a heading colour. Outside the accents
   named above, if something is lime it is clickable or currently selected.

   LIME ON A LIGHT GROUND
     --lime        the real brand lime. Fills only, and text on royal blocks.
     --lime-text   the same hue driven down to 5.2:1 on white, for lime used
                   as text or as a hairline on a light surface.
     --accent-ink  "lime, tuned to whatever is underneath". Defaults to
                   --lime-text; every royal block re-points it at --lime.

   ZONE COLORS are a separate, contained sub-system. They appear only inside
   the isometric map, its legend, the zone cards and the zone page headers.
   --zone is the fill, --zone-ink the same hue darkened for text on paper.

   The Ventura logo keeps its own lime and navy and lives only in the header.
   No token here touches it.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Ground --- */
  --paper:   #FFFFFF;
  --paper-2: #F4F6FA;
  --paper-3: #E7ECF3;

  /* --- Royal blue, for the three brand moments --- */
  --royal:      #1B3BD8;
  --royal-deep: #1430A6;
  --royal-lift: #2A4CEE;

  /* --- Lime, action only --- */
  --lime:      #C7F53F;
  --lime-deep: #B2E020;
  --lime-ink:  #0A1200;   /* text on a lime fill */
  --lime-text: #587700;   /* 5.2:1 on white, 4.6:1 on --paper-2 */

  --accent-ink: var(--lime-text);

  /* --- Text --- */
  --ink:   #0B0E14;
  --body:  #414B5A;   /* 8.6:1 on white */
  --faint: #626D7D;   /* 5.5:1 on white */

  /* --- Lines --- */
  --rule:        rgb(11 14 20 / 0.10);
  --rule-mid:    rgb(11 14 20 / 0.16);
  --rule-strong: rgb(11 14 20 / 0.26);
  --rule-royal:  rgb(255 255 255 / 0.22);   /* lines drawn on a royal block */

  /* --- Focus --- */
  --focus-ring: var(--royal);

  --hero-scrim: rgb(8 9 11 / 0.56);

  /* --- Zone identity. Four zones, four hues. ---
     The warm sand that used to be Reception went with the zone: the perks
     section that replaced it is brand colours, not a zone colour, because a
     fifth hue there would have made it read as a fifth world. */
  --z-train:     #4C7BFF;
  --z-move:      #12B8E6;
  --z-play:      #17C9A0;
  --z-recover:   #8C6BFF;

  --z-train-ink:     #1F4FD8;
  --z-move-ink:      #0A6E8C;
  --z-play-ink:      #0A7A5F;
  --z-recover-ink:   #5B3ED6;

  /* ========================================================================
     TYPE. Three roles and no more.

       DISPLAY   Geist 700, tight tracking. Hero, section titles, statements.
       SANS      Geist 400/500/600. Everything a person reads as prose.
       MONO      Geist Mono. Metadata ONLY: times, schedules, labels, tags,
                 eyebrows, step numbers. Never a sentence, never a headline,
                 and NOT a price at display size: every glyph gets an equal
                 cell in a monospace, so the comma in $49,99 sits in a box of
                 its own and the amount reads as "$49 , 99". Prices are set in
                 the display sans with tabular figures instead.
     ====================================================================== */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --step--2: clamp(0.68rem, 0.66rem + 0.08vw, 0.74rem);
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.85vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.45rem + 1.7vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.2vw, 4.5rem);
  --step-5:  clamp(2.6rem, 1.4rem + 5.2vw, 6.2rem);

  /* Tracking. Display type tightens as it grows; mono labels open up. */
  --track-display: -0.035em;
  --track-tight:   -0.02em;
  --track-label:   0.12em;

  /* ========================================================================
     SPACE. --section-y is the single lever for the rhythm of the whole page:
     every .section pads by it top and bottom, so two neighbours always stack
     two of them at their seam. --gutter is the only horizontal page padding
     on the site, and --maxw the only measure.
     ====================================================================== */
  --gutter: clamp(1.25rem, 5vw, 2.75rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 5vw, 4rem);
  --maxw: 1280px;
  --maxw-text: 62ch;

  /* One gap scale for every grid on the site. */
  --gap-xs: 0.5rem;
  --gap-sm: 0.85rem;
  --gap-md: clamp(1rem, 2vw, 1.5rem);
  --gap-lg: clamp(1.5rem, 3.5vw, 2.5rem);
  --gap-xl: clamp(2rem, 5vw, 3.5rem);

  /* The gap between a section head and the block it introduces. */
  --head-gap: clamp(1.75rem, 3.5vw, 3rem);

  /* ========================================================================
     SHAPE. One radius scale. Squared-off was reading as utility rather than
     as club: cards are softened, actions are pills, hairline chips keep the
     small step.
     ====================================================================== */
  --r-xs: 4px;
  --r:    8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Card interior. Every card on the site pads by one of these two. */
  --card-pad: clamp(1.15rem, 2.4vw, 1.6rem);
  --card-pad-lg: clamp(1.5rem, 3.5vw, 2.25rem);

  /* Controls. */
  --btn-h-sm: 40px;
  --btn-h:    48px;
  --btn-h-lg: 56px;
  --icon:     20px;
  --icon-lg:  24px;

  /* Elevation. Three steps, all cool-tinted so they sit on a blue-grey page
     rather than greying it. */
  --shadow-sm: 0 1px 2px rgb(11 14 20 / 0.04), 0 2px 8px rgb(11 14 20 / 0.04);
  --shadow-md: 0 2px 4px rgb(11 14 20 / 0.05), 0 12px 28px rgb(11 14 20 / 0.07);
  --shadow-lg: 0 4px 8px rgb(11 14 20 / 0.06), 0 24px 56px rgb(11 14 20 / 0.10);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --t-press:  140ms;
  --t-swap:   180ms;   /* content leaving */
  --t-enter:  240ms;   /* content arriving */
  --t-hover:  240ms;   /* card and control hover */
  --t-lift:   260ms;   /* isometric block select */
  --t-reveal: 620ms;   /* first-time scroll reveal */

  /* The sticky header, published so anchors and the map can clear it. */
  --head-h: 60px;
}

/* Every surface that is solid royal re-points the two surface-dependent
   tokens, so the components sitting on it need no royal-specific rules of
   their own. One place to add a blue block, one place to keep it consistent. */
.section--royal,
.statement,
.site-foot,
.hero {
  --accent-ink: var(--lime);
  --focus-ring: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-reveal: 200ms;
    --t-swap: 120ms;
    --t-enter: 160ms;
    --t-hover: 120ms;
    --t-lift: 120ms;
  }
}