/* tokens.css — design tokens only: colour, type, spacing, radius, elevation, motion.
   Nothing else in the project may hardcode a value that lives here.

   Visual direction: "Cal y Césped". Chalk-white ground, grass-green accent,
   editorial serif headlines over a neo-grotesque body. Green plus chalk is the
   contrast a TV viewer already associates with "in versus out".

   Contrast checked against WCAG AA at authoring time. If a pair fails after a
   change, darken the foreground token rather than lightening the ground.
*/

/* ---- Faces -------------------------------------------------------------- */
/* Self-hosted so the site makes zero third-party requests, which is what lets
   the CSP in _headers stay at font-src 'self'. Latin subset only: it covers
   every character Spanish needs, including á é í ó ú ñ ü ¿ ¡ */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* La itálica de Instrument Serif se descargó en la Fase 2 y se borró en la
   Fase 14: la redacción final no usa cursiva en ningún lado, y un archivo de
   fuente declarado pero sin usar es una descarga que el navegador puede llegar
   a hacer igual. */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;   /* variable weight axis */
  font-display: swap;
  src: url('../assets/fonts/work-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {

  /* ---- Ground and text -------------------------------------------------- */
  --c-bg: #F7F8F3;          /* chalk white, the page ground */
  --c-surface: #EAEEE3;     /* recessed panels, diagram backgrounds */
  --c-card: #FFFFFF;        /* raised cards: quiz, nav panel */
  --c-border: #D3DAC9;
  --c-text: #1B2119;        /* 15:1 on --c-bg */
  --c-text-muted: #55604F;  /* 6.2:1 on --c-bg */

  /* ---- Accent ----------------------------------------------------------- */
  --c-accent: #2E6B3F;         /* césped — the single primary accent, 6.0:1 on --c-bg */
  --c-accent-strong: #21502F;  /* hover and pressed */
  --c-accent-soft: #DCE7DC;      /* tinted backgrounds behind accent content */
  --c-accent-soft-hi: #CFE0D0;   /* the same tint, one step darker, for hover */

  /* ---- Diagram-only surfaces -------------------------------------------- */
  /* Strictly for differentiating a court surface or a secondary element inside
     a diagram. Never UI chrome, buttons, links or text. */
  --c-clay: #C0522E;
  --c-hard: #1F5FA8;

  /* ---- Court ------------------------------------------------------------ */
  --c-court: #2E6B3F;       /* the playing surface */
  --c-court-out: #6E9C76;   /* run-off outside the lines — 2.0:1 against the court,
                               so "in" and "out" read as different areas */
  --c-line: #FFFFFF;        /* chalk — 6.4:1 on the court */
  --c-ball: #D8E44B;        /* 4.6:1 on the court */
  --c-ball-stroke: #7C8A1F;
  --c-jugador: #1B2119;
  --c-net: #2A3327;
  --c-net-top: #F2F4EE;

  /* ---- Semantic states -------------------------------------------------- */
  /* Three states, not two: the quiz gives one retry before revealing the answer,
     and that middle state has to be visually distinct from both outcomes. */
  --c-correct: #1E7A4D;
  --c-correct-bg: #E2F2E8;
  --c-incorrect: #B3261E;
  --c-incorrect-bg: #FBE9E7;
  --c-retry: #8F5310;
  --c-retry-bg: #FBEEDC;

  /* ---- Type ------------------------------------------------------------- */
  --ff-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ff-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid between a 360px floor and a desktop ceiling, so nothing jumps at a
     breakpoint. Body floor stays above 16px: the reading case is a phone at
     arm's length. */
  --fs-hero: clamp(2.25rem, 9vw, 4rem);
  --fs-title: clamp(1.625rem, 6vw, 2.5rem);
  --fs-subtitle: clamp(1.125rem, 3.8vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 2.8vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-label: clamp(0.75rem, 2.4vw, 0.875rem);   /* diagram labels, smallest type */

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --ls-display: -0.015em;
  --ls-body: 0;
  --ls-caps: 0.08em;

  --measure: 66ch;

  /* ---- Spacing ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --gutter: clamp(1rem, 5vw, 2.5rem);
  --section-pad: clamp(3rem, 11vw, 7rem);

  --container: 68rem;
  --container-narrow: 40rem;

  --nav-h: 3.5rem;

  /* ---- Radius and elevation --------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(27, 33, 25, .06), 0 8px 24px rgba(27, 33, 25, .07);
  --shadow-panel: 0 -4px 32px rgba(27, 33, 25, .14);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}