/**
 * tokens.css — Variables de diseño (único lugar para colores, espacios y tipografía).
 * Ver docs/DESIGN.md. Todo CSS del sitio debe usar estas variables, no valores sueltos
 * (tests/tokens.test.js lo vigila).
 *
 * Paleta A "Forja" (decidida 2026-10-06): carbón azulado, naranja forja, plata, neutro y
 * gris de apoyo. Modo noche (2026-10-06): los mismos colores de marca con los papeles
 * invertidos (fondo carbón, texto neutro). Se aplica según el dispositivo
 * (prefers-color-scheme) y se puede cambiar con el botón de tema (guardado en localStorage).
 *
 * IMPORTANTE: los valores del modo oscuro están escritos DOS veces (en el @media y en
 * :root[data-theme="dark"]) porque CSS no permite reutilizar un bloque; tests/tokens.test.js
 * comprueba que sean idénticos y que cada combinación de texto cumpla contraste AA.
 * La plata (#C5CBD3) solo se usa en bordes y detalles de la versión clara, NUNCA como texto
 * ni botón sobre blanco (1,6:1). El naranja no sirve para el anillo de foco en modo claro (2,8:1).
 */
:root {
  /* Avisa al navegador que la página soporta los dos esquemas (controles nativos, barras de scroll). */
  color-scheme: light dark;

  /* Colores de marca (primitivos) */
  --color-carbon: #1f2933; /* texto y fondos oscuros */
  --color-forge: #f76707; /* naranja forja: acento y botón principal */
  --color-silver: #c5cbd3; /* plata: bordes y detalles, no para texto sobre claro */
  --color-neutral: #f3f5f7; /* fondo de la página (modo claro) y texto (modo oscuro) */
  --color-support: #52606d; /* gris de apoyo: texto secundario (modo claro) */
  --color-white: #ffffff; /* superficies del modo claro y fondo de las fotos; fuera de la paleta de marca */
  --color-azure: #0b5fff; /* foco de teclado en modo claro */
  --color-carbon-raised: #283542; /* superficie (tarjetas, cabecera) del modo oscuro: carbón un poco más claro */
  --color-azure-light: #4d8dff; /* foco de teclado en modo oscuro */

  /* Colores por función (usar estos en los estilos). Modo claro por defecto. */
  --color-bg: var(--color-neutral);
  --color-surface: var(--color-white);
  --color-border: var(--color-silver);
  --color-text: var(--color-carbon);
  --color-muted: var(--color-support);
  --color-accent: var(--color-forge); /* botón "Comprar por WhatsApp" */
  --color-accent-contrast: var(--color-carbon); /* texto sobre el acento (4,85:1; el blanco daría 3,0:1) */
  --color-focus: var(--color-azure); /* anillo de foco visible en teclado */
  --color-photo-bg: var(--color-white); /* las fotos tienen fondo transparente: siempre sobre claro */

  /* Espaciado en escala */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* Tipografía: fuentes del sistema (rápidas, sin descargas) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 1rem;
  --text-small: 0.875rem;
  --text-large: 1.25rem;
  --line-height: 1.5;

  /* Forma */
  --radius: 0.5rem;

  /* Área táctil mínima de botones (WCAG 2.2: 44 px recomendado) */
  --touch-target: 2.75rem;
}

/* Modo oscuro por preferencia del dispositivo, salvo que la persona haya elegido "claro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-carbon);
    --color-surface: var(--color-carbon-raised);
    --color-border: var(--color-support);
    --color-text: var(--color-neutral);
    --color-muted: var(--color-silver);
    --color-focus: var(--color-azure-light);
  }
}

/* Elección manual de la persona (botón de tema). */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--color-carbon);
  --color-surface: var(--color-carbon-raised);
  --color-border: var(--color-support);
  --color-text: var(--color-neutral);
  --color-muted: var(--color-silver);
  --color-focus: var(--color-azure-light);
}