/* ==========================================================================
   TOCAN — tokens del sistema de diseño (PROYECTO §6)
   Fuente única de color, tipografía y espaciado. Web (Walter) e IG (Clara)
   importan este archivo; nadie define colores sueltos.
   Fuentes (Google Fonts): Anton · IBM Plex Sans · Permanent Marker
   ========================================================================== */

:root {
  /* Paleta base (PROYECTO §6.4) */
  --tocan-naranja:        #FF5A1F;
  --tocan-naranja-oscuro: #D9470F;
  --tocan-negro:          #111111;
  --tocan-blanco:         #FFFFFF;
  --tocan-topo:           #3A3634;   /* fondo modo oscuro */
  --tocan-topo-claro:     #4A4542;   /* superficies elevadas en oscuro */
  --tocan-gris:           #8C8782;   /* líneas, metadatos grandes */
  --tocan-gris-claro:     #E6E2DD;   /* líneas y fondos suaves en claro */
  /* Agregado por contraste AA: #8C8782 sobre blanco da 3,6:1 y no alcanza
     para texto chico. El texto secundario en claro usa este. (5,7:1) */
  --tocan-gris-oscuro:    #6B6661;

  /* Tipografía (PROYECTO §6.5) */
  --font-display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-texto:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-marcador: "Permanent Marker", "Marker Felt", cursive;
  --tracking-display: 0.02em;

  /* Escala: 12 / 14 / 17 / 22 / 28 / 40 / 64 / 96 */
  --t-12: 12px; --t-14: 14px; --t-17: 17px; --t-22: 22px;
  --t-28: 28px; --t-40: 40px; --t-64: 64px; --t-96: 96px;
  --interlineado-lectura: 1.6;

  /* Espaciado y líneas (márgenes gruesos, separadores de 2 px, sin sombras) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --linea: 2px;
  --columna-lectura: 680px;
  --ancho-max: 1200px;

  /* Afiche: el componente cartel es siempre oscuro, en cualquier modo */
  --afiche-bg: var(--tocan-topo);
  --afiche-fg: var(--tocan-blanco);
  --afiche-fg-2: var(--tocan-gris-claro);
  --afiche-acento: var(--tocan-naranja);
}

/* Modo claro (default) — "lectura" */
:root {
  --bg: var(--tocan-blanco);
  --fg: var(--tocan-negro);
  --fg-2: var(--tocan-gris-oscuro);
  --surface: var(--tocan-gris-claro);
  --linea-color: var(--tocan-negro);
  --accent: var(--tocan-naranja);
  --accent-hover: var(--tocan-naranja-oscuro);
  --sobre-accent: var(--tocan-negro);   /* texto sobre naranja: 6,1:1 */
  --acento-texto: var(--tocan-naranja-oscuro); /* naranja para texto grande sobre fondo claro */
  color-scheme: light;
}

/* Modo oscuro — "afiche" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tocan-topo);
    --fg: var(--tocan-blanco);
    --fg-2: var(--tocan-gris-claro);
    --surface: var(--tocan-topo-claro);
    --linea-color: var(--tocan-gris-claro);
    --acento-texto: var(--tocan-naranja);
    --afiche-bg: var(--tocan-topo-claro);  /* el afiche se despega del fondo topo */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--tocan-topo);
  --fg: var(--tocan-blanco);
  --fg-2: var(--tocan-gris-claro);
  --surface: var(--tocan-topo-claro);
  --linea-color: var(--tocan-gris-claro);
  --acento-texto: var(--tocan-naranja);
  --afiche-bg: var(--tocan-topo-claro);
  color-scheme: dark;
}