/*
  Tokens del diseño (`Web Academia.dc.html`, bloque :root del helmet).

  --accent, --on-accent y --primary los SOBREESCRIBE el servidor con los colores de la academia,
  en un <style> dentro del <head> (ver _Layout.cshtml). Los valores de aquí son solo el respaldo:
  son los del diseño, y los usa `_LayoutNeutro` —la página de error y la de "sin web publicada"—,
  que no interpola marca porque puede no haber academia resuelta.

  OJO CON EL ORDEN: para que ese respaldo NO gane, el <style> de _Layout tiene que ir DESPUÉS de
  este fichero. Son dos `:root` con la misma especificidad, así que decide el orden en el
  documento; un <style> en el <head> no tiene la precedencia de un atributo `style`. Durante un
  tiempo el bloque iba antes de los <link> y este fichero pisaba los colores de todos los clubes.

  El resto son fijos: forman parte del diseño, no de la marca del club.
*/
:root {
  --accent: #e8ff3f;
  /*
    Texto sobre el color primario. Respaldo para _LayoutNeutro, que no interpola marca.

    BLANCO y no el acento, y es una desviación deliberada del prototipo: el diseño pinta los botones
    oscuros con el texto en acento, y eso funciona con SU acento —un amarillo muy claro— pero no con
    cualquiera: un azul sobre negro se lee a duras penas, y eso fue justo lo que apareció en pantalla.
    El club que quiera el botón del prototipo pone su acento aquí.
  */
  --on-primary: #ffffff;
  --on-accent: #0e0e0c;
  --primary: #0e0e0c;

  --ink: #0e0e0c;
  --line: #e3e0db;
  /* Raya interior, más suave que --line: separa filas DENTRO de un marco (las facturas del socio),
     donde el borde de la caja ya hace el trabajo fuerte. Es el #f1efeb del diseño. */
  --line-suave: #f1efeb;
  --muted: #6b665e;

  /* Grises del diseño, extraídos de los estilos en línea para no repetir literales. */
  --surface: #ffffff;
  --surface-alt: #f6f5f3;
  --surface-mute: #f1efeb;
  --border-strong: #d6d2cb;
  --ink-soft: #3f3b35;
  --disabled-fg: #a09a91;
  --placeholder: #b8b2a9;
  --mono-muted: #9d978d;

  /* Oscuros de cabecera, hero y pie. */
  --dark: #0e0e0c;
  --dark-alt: #141412;
  --dark-line: #2b2b27;
  --dark-fg: #cfcdc7;
  --dark-muted: #93908a;
  --dark-eyebrow: #6e6c64;
  --dark-bajada: #c9c7c0;
  --dark-borde: #4b4843;

  /* La banda oscura de la ficha de torneo trae en el diseño sus propios dos grises: el del texto y
     el del enlace de vuelta, más apagado. */
  --dark-banda-fg: #e9e6e0;
  --dark-banda-muted: #a9a49b;

  --shell-max: 1360px;
  --shell-narrow: 860px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 100px;

  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Sangrado horizontal común a todas las bandas de contenido. */
  --gutter: clamp(16px, 3vw, 32px);
}