/* ALDS · valores de diseño compartidos por las tres zonas (sitio público, área de socios y admin).

   Es la única fuente de la paleta: site.css y alds-admin.css los usan y NO los redefinen (lo
   comprueba SharedTokensTests, en core/tests.py). La cargan base.html, auth_base.html y
   admin/base_site.html, siempre antes de la hoja de su zona. Las reglas de uso están en
   docs/CLAUDE.md; el plan, en docs/roadmap/rediseno.md.

   Paleta tomada del logo real de la peña (verde lima, rojo STOP, negro, blanco), muestreada
   píxel a píxel. El verde y el rojo no se combinan en degradado entre sí (mezclan mal, quedan
   parduzcos): van como bloques sólidos, como en el propio logo. Verde para superficies grandes
   (hero, franjas), rojo para la acción principal. Todos los contrastes de abajo están medidos
   con la fórmula de WCAG, no estimados. */

:root {
  /* --- Marca --- */
  /* Pistacho: solo superficies grandes con tinta oscura encima (7,9:1). El texto blanco encima
     da 2,3:1: no lo lleva nunca. */
  --brand-green: #96b823;
  --brand-green-dark: #78931c;
  /* El mismo verde llevado a L más baja: es el único tono de la familia que pasa AA como texto
     sobre blanco (5,4:1) o como relleno con texto blanco encima. Para texto, enlaces y botones. */
  --brand-green-deep: #5c7314;
  --brand-green-deep-dark: #46590f;
  /* Rojo STOP: la acción principal (5,5:1 con texto blanco). */
  --brand-red: #d30b11;
  --brand-red-dark: #a5090c;

  /* --- Tinta y superficies ---
     Neutros con un punto de verde (el matiz del logo) en vez del azul pizarra de antes. */
  --ink: #14170f;            /* texto y pie: 18,1:1 sobre blanco */
  --ink-medium: #3c4136;     /* párrafos y etiquetas: 10,5:1 sobre blanco */
  --ink-quiet: #5f6558;      /* apoyo (fechas, pies de foto): 6,0:1 sobre blanco, 5,5:1 sobre el fondo */
  --on-dark: #d5d8cc;        /* texto secundario sobre tinta (pie): 12,5:1 */
  --surface: #ffffff;        /* tarjetas */
  --page-bg: #f5f5f4;        /* fondo de página */
  --field-bg: #fafaf9;       /* fondo de los campos de formulario */
  --border: #e2e4da;         /* separadores y bordes de tarjeta (decorativos) */
  --border-strong: #858c7a;  /* borde de un control: 3,5:1 sobre blanco (WCAG 1.4.11 pide 3:1) */
  --focus-ring: var(--brand-green-deep); /* anillo de foco de teclado; las bandas pistacho y lo oscuro lo cambian */

  /* --- Estados ---
     Cada estado son tres valores que se usan siempre juntos y con el mismo significado en las
     tres zonas: -fg es el texto (AA sobre su -bg), -bg el fondo de la píldora o aviso y el valor
     sin sufijo el marcador (barras, bordes de campo, iconos: 3:1 como mínimo, no vale para
     texto). Nunca el color sobre blanco a secas: siempre en pareja con su fondo. */
  --status-good: #0ca30c;
  --status-good-bg: #dcfce7;
  --status-good-fg: #15803d;
  --status-warning: #d97706;
  --status-warning-bg: #fef3c7;
  --status-warning-fg: #92400e;
  --status-critical: #d03b3b;
  --status-critical-bg: #fee2e2;
  --status-critical-fg: #b91c1c;
  --status-info: #2563eb;
  --status-info-bg: #dbeafe;
  --status-info-fg: #1d4ed8;
  /* Sin estado (inactivo, cerrado): gris con el mismo matiz cálido. */
  --status-idle-bg: #e6e8df;
  --status-idle-fg: #4a5044;

  /* --- Tipografía --- */
  --font-display: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala tipográfica: ocho tamaños y no más. En rem, así siguen el tamaño de letra que el
     visitante haya elegido en su navegador (1rem = 16px por defecto). Cuatro pesos: 400 (texto),
     600 (etiquetas y navegación), 700 (enlaces, botones, títulos menores) y 800 (títulos). */
  --text-xs: .75rem;    /* 12px · píldoras, cabeceras de tabla, antetítulos, pies de foto */
  --text-sm: .875rem;   /* 14px · datos densos: tablas, fechas, etiquetas, ayudas, errores, pie */
  --text-base: 1rem;    /* 16px · el tamaño base: párrafos, campos, botones, navegación */
  --text-lg: 1.125rem;  /* 18px · entradilla, titular de tarjeta, marca, título de panel */
  --text-xl: 1.375rem;  /* 22px · cifras de una tarjeta de estado, título de una tarjeta de acceso */
  --text-2xl: 1.75rem;  /* 28px · títulos de sección y de pantalla, cuenta atrás */
  --text-3xl: 2.25rem;  /* 36px · título de página y de noticia */
  --text-4xl: 3rem;     /* 48px · titular de la portada */

  /* --- Forma ---
     Tres radios y los círculos (50%): 8px para controles (campos, botones, casillas), 14px para
     tarjetas, paneles y bloques, 999px para píldoras. La separación por defecto es un borde de
     1px; las sombras son solo estas tres. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 8px color-mix(in srgb, var(--ink) 4%, transparent);    /* tarjeta en reposo */
  --shadow-lift: 0 16px 36px color-mix(in srgb, var(--ink) 14%, transparent); /* flota o se levanta */
  --shadow-button: 0 10px 24px color-mix(in srgb, #000 20%, transparent);     /* botón principal */

  /* --- Espaciado ---
     Escala: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 (px, escritos tal cual en las reglas: no hace
     falta una variable por cada valor). La excepción es el margen lateral de la página, que cambia
     con el ancho de pantalla: 24px, y 16px por debajo de 640px. */
  --gutter: 24px;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}