/* ============================================================================
   TOKENS — the design system decoded from the reference exercise (2026-07)
   Single source of truth for color, type scale, radii, spacing, and motion.
   Pages consume these via system.css (primitives) and page.css (sections).
   Font note: display/body = Suisse Intl, self-hosted from the reference set
   (licensed to Robbins Research Intl — private local study only, swap before
   any deploy; Inter Tight/Inter stays as the swap-ready fallback).
   Micro-labels = Arial: the reference site's labels resolve to Arial (its own
   fallback trap), so Arial IS the reference look. Plex Mono/Sans faces stay
   declared for parity with the reference asset set but are unused.
   ========================================================================== */

@font-face { font-family: "Suisse Intl"; src: url("../fonts/SuisseIntl_UltraLight-s.p.0r5zw9foju0pu.woff2") format("woff2"); font-display: swap; font-weight: 100; font-style: normal; }
@font-face { font-family: "Suisse Intl"; src: url("../fonts/SuisseIntl_Regular-s.p.0i5ozl~xudcdi.woff2") format("woff2"); font-display: swap; font-weight: 400; font-style: normal; }
@font-face { font-family: "Suisse Intl"; src: url("../fonts/SuisseIntl_Medium-s.p.0x3pfb0alz64e.woff2") format("woff2"); font-display: swap; font-weight: 500; font-style: normal; }
@font-face { font-family: "Suisse Intl"; src: url("../fonts/SuisseIntl_SemiBold-s.p.09b-51js~lyyv.woff2") format("woff2"); font-display: swap; font-weight: 600; font-style: normal; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium-latin.woff2") format("woff2"); font-display: swap; font-weight: 500; font-style: normal; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular-latin.woff2") format("woff2"); font-display: swap; font-weight: 400; font-style: normal; }

:root {
  /* --- neutrals --- */
  --black: #000;
  --near-black: #0a0a0a;
  --panel-dark: #0d0d0d;
  --black-1: #232325;   /* dark surface 1 (cards on black) */
  --black-2: #303134;   /* dark surface 2 (hover tier) */
  --white: #fff;
  --white-1: #f6f6f7;   /* light surface 1 (gray pills, panels) */
  --white-2: #dadbdf;   /* light surface 2 (hover tier) */
  --off: #f6f6f7;
  --line: #e5e5e5;
  --gray: #6f6f6f;
  --gray-on-dark: #b3b3b3;

  /* --- accents (chassis colors; re-skin swaps these in one place) --- */
  --blue: #2764ff;      /* announce bar, kicker dots, primary accent */
  --blue-deep: #1d40c4;
  --orange: #f7941d;    /* secondary accent (coaching band) */
  --red: #e5484d;       /* sale price */

  /* --- radii --- */
  --r-xl: 24px;
  --r-lg: 16px;         /* the workhorse: cards, banners, tiles */
  --r-md: 12px;

  /* --- spacing --- */
  --pad: clamp(16px, 2.7vw, 40px);   /* page gutter; sections are full-bleed + .wrap */

  /* --- motion --- */
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-tw: cubic-bezier(0.4, 0, 0.2, 1);   /* tailwind default — reveals, crossfades */

  /* --- families --- */
  --sans: "Suisse Intl", "Inter Tight", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: Arial, "Helvetica Neue", sans-serif;  /* micro-labels — reference-exact (clone.css) */

  /* --- fluid type scale (verbatim from the decoded reference system) --- */
  --fs-xs: clamp(0.75rem, 0.17vw + 0.76rem, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.17vw + 0.76rem, 1rem);
  --fs-base: clamp(1rem, 0.34vw + 0.91rem, 1.25rem);
  --fs-md: clamp(1.25rem, 0.5vw + 1.2rem, 1.5rem);
  --fs-lg: clamp(1.5rem, 1vw + 1.25rem, 2.5rem);
  --fs-xl: clamp(1.75rem, 1.5vw + 1.5rem, 3.5rem);
  --fs-xxl: clamp(2.25rem, 2vw + 2rem, 4.5rem);
  --fs-xxxl: clamp(3rem, 3vw + 2rem, 6rem);
}