/* Whitestone Juniors — design tokens
   Ported from ~/design-library/kits/junior-padel-jakarta/tokens.css.
   Values are verbatim from the kit unless a comment says OVERRIDDEN or DERIVED.
   Mapping and justification: evals/order-sheet.md §3. */

:root {
  /* ---------- Colour ---------- */
  --paper:        #F5F4EF;
  --paper-raised: #FFFFFF;

  /* OVERRIDDEN. Kit says #1A2266, but the kit logs that as an approximation from the
     brief. Sampled from the real logo this session (WHITESTONE (6).png, dominant opaque
     ink, 687,191px, exact RGB): #0B124D. Measured brand asset beats an approximation. */
  --navy:      #0B124D;
  --navy-deep: #060C33;   /* DERIVED — scrim base + footer */
  --navy-tint: #E4E6F0;   /* DERIVED — quiet SURFACE on paper. Never text. */

  /* DERIVED — oversized background type (§5's "This is a Friday", the 404
     numeral). These used --navy-tint, which is a surface colour: #E4E6F0 on
     --paper is 1.13:1 and three of §5's four words were effectively invisible,
     a WCAG 1.4.3 failure on text that is marked up as the section's own <h2>.

     #8588A1 is navy blended 52% toward paper and measures 3.16:1 — the palest
     step that still clears the 3:1 large-text threshold (everything using this
     is 44px+, well past the 24px cut-off). Deliberately the minimum-passing
     value rather than a comfortable one: the whole point of the device is that
     the type sits back behind the photography, so it should be exactly as
     faint as the standard allows and not a shade fainter. */
  --ghost-ink: #8588A1;

  --ink:    #14161F;
  --ink-70: rgba(20, 22, 31, 0.70);
  --ink-45: rgba(20, 22, 31, 0.45);

  /* ONE bright accent. Join actions only — never headings, icons, borders, or hovers.
     Contrast against --navy #0B124D = 13.2:1 both directions. */
  --volt:       #D8FF4F;
  --volt-press: #C2E63F;

  /* ---------- Glass (DERIVED — not in the kit; see order-sheet §3) ---------- */
  --glass-fill-light: rgba(255, 255, 255, 0.46);
  --glass-fill-dark:  rgba(11, 18, 77, 0.46);  /* 0.42 -> 0.62 -> 0.46: 0.62 read as a solid panel, not glass */
  --glass-stroke:     rgba(255, 255, 255, 0.40);
  --glass-blur:       34px;
  --glass-shadow:     0 18px 48px rgba(6, 12, 51, 0.28);
  /* Scrim. Originally near-opaque because text sat close to the media. All text
     now lives inside a glass card that carries its own fill, so the scrim only
     has to anchor the card's foot — not black out the photograph. Lightened so
     the sky in the renders actually reads as sky. */
  --scrim-navy: linear-gradient(
    to top,
    rgba(6, 12, 51, 0.88) 0%,
    rgba(6, 12, 51, 0.55) 26%,
    rgba(6, 12, 51, 0.14) 58%,
    rgba(6, 12, 51, 0) 100%
  );

  /* ---------- Type ---------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3.25rem, 2.40rem + 3.60vw, 5.65rem); /* 52px @375 -> 90px @1440 */
  --fs-h2:      clamp(2.00rem, 1.55rem + 1.90vw, 3.00rem); /* 32px -> 48px */
  --fs-h3:      clamp(1.375rem, 1.20rem + 0.75vw, 1.75rem);/* 22px -> 28px */
  --fs-lead:    clamp(1.125rem, 1.03rem + 0.40vw, 1.375rem);/*18px -> 22px */
  --fs-body:    clamp(1.00rem, 0.94rem + 0.27vw, 1.125rem);/* 16px -> 18px */
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-btn:     1rem;

  --lh-display: 0.92;
  --lh-h2:      1.10;
  --lh-h3:      1.25;
  --lh-body:    1.55;

  --ls-display: -0.03em;
  --ls-body:    -0.01em;
  --ls-micro:    0.14em;

  /* ---------- Space ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --space-section: clamp(3.00rem, 2.10rem + 3.80vw, 5.50rem); /* 48px -> 88px */
  --gutter:        clamp(1.25rem, 1.00rem + 1.07vw, 2rem);    /* 20px -> 32px */

  --container:      1120px;
  --container-text: 640px;

  --header-h: 56px;
  --header-top: 12px;   /* floating-pill inset from the top edge */

  /* ---------- Shape ---------- */
  --radius-s:    4px;
  --radius-m:    8px;
  --radius-l:    20px;  /* DERIVED — glass cards */
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-gleasing:  cubic-bezier(0.4, 0, 0, 1);
  --ease-material:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-micro:  180ms;
  --dur-ui:     250ms;
  --dur-reveal: 600ms;
}

/* Inverted band. Kit precedent: rafanadalacademy spends exactly one full-bleed navy band. */
.band--navy {
  --paper: var(--navy);
  --ink: #FFFFFF;
  --ink-70: rgba(255, 255, 255, 0.72);
  --ink-45: rgba(255, 255, 255, 0.50);
  --glass-fill-light: rgba(255, 255, 255, 0.10);
  --glass-stroke: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-ui: 0ms; --dur-reveal: 0ms; }
}