/* XtraPass — tokens de DESIGN.md. Único sitio con colores, tipografías y medidas.
   El resto del CSS solo usa estas variables. */

@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Letra de rotulador: solo para lo que está "escrito a mano" en la pizarra del libro de jugadas. */
@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --bg: #0A0A0A;            /* el pabellón */
  --surface: #F4F4F1;       /* la pizarra */
  --ink: #0A0A0A;           /* rotulador negro */
  --ink-2: #5A5A56;         /* texto secundario sobre la pizarra */
  --ink-on-bg: #FFFFFF;     /* texto sobre el negro */
  --ink-2-on-bg: #A3A3A0;   /* texto secundario sobre el negro */
  --accent: #C81E1E;        /* rojo rotulador = "lo importante". Solo: botón principal,
                               trazo decisivo de cada jugada y círculo del dato clave */
  --on-accent: #FFFFFF;

  /* Colores de fondo de las secciones */
  --field-1: #0A0A0A;       /* pabellón · tinta blanca */
  --field-2: #F4F4F1;       /* pizarra · tinta negra */
  --field-3a: #ECECE7;      /* fichas del libro de jugadas (alternas) */
  --field-3b: #E3E3DD;
  --field-4: #FFFFFF;       /* papel: hoja de scouting */
  --field-5: #0D4DC9;       /* azul de marca · tinta blanca. Nunca con rojo encima */

  --court-line: #CFCFC9;    /* líneas de la pista impresas en la pizarra */
  --dev-marca: #FFE38A;     /* solo en local: marca de PENDIENTE y de artículos de ejemplo */

  /* Tipografía: Switzer para todo; rotulador solo en la pizarra del libro de jugadas */
  --font: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --weight-text: 400;
  --weight-strong: 500;
  --weight-display: 600;
  --tracking-display: -0.04em;
  --tracking-text: -0.005em;
  --leading-display: 0.95;
  --leading-text: 1.5;
  --measure: 66ch;

  /* Cinco tamaños como máximo */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14 px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19 px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);       /* 20–26 px */
  --step-head: clamp(2rem, 1.2rem + 2.2vw, 4rem);              /* 32–64 px */
  --step-display: clamp(2.75rem, 1rem + 3.6vw, 7rem);          /* 44–112 px, solo portada */

  /* Forma */
  --r-sm: 0px;
  --r-md: 0px;
  --r-pill: 999px;          /* solo para lo redondo de verdad: O, logo, puntos de troquel */

  /* Medidas */
  --gutter: clamp(16px, 2.5vw, 32px);           /* márgenes exteriores */
  --pad: clamp(20px, 3.5vw, 56px);              /* relleno dentro de las piezas */
  --section-gap: clamp(96px, 18vh, 240px);      /* separación entre secciones */
  --stroke-play: 4px;                           /* trazos de las jugadas */
  --stroke-court: 2px;                          /* líneas de la pista */

  /* Movimiento */
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);       /* ease-out */
  --dur-trazo: 700ms;                           /* cada trazo de la jugada firma */
}