/* Tokens de diseño (especificación §3). Claro en :root; oscuro por prefers-color-scheme y por data-theme. */
:root {
  --red: #EB1A2C;      /* muestreado del logo; hex oficial: Faltan datos */
  --red-bg: #E3192A;   /* fondo rojo bajo texto blanco (botones, hero, tarjetas): 4,73:1, AA */
  --red-ink: #B8001B;  /* rojo para texto sobre fondo claro, AA */
  --red-hover: #C8101F;
  --ink: #16090B;
  --ink-2: #5E5659;
  --paper: #FFFFFF;
  --gray: #F3F1F1;
  --stage: #EDEAEA;
  --line: #DDD6D8;
  --on-red: #FFFFFF;
  --focus: #16090B;
  --band: #16090B;          /* franjas oscuras (normas, sistema, footer, leyendas): no cambia con el tema para conservar contraste AA con texto blanco */
  --accent-on-ink: #FF8A94; /* rojo claro para texto sobre --band */
  --wa: #128C4A;
  --wa-hover: #0E7A40;
  --display: 'Barlow Condensed', 'Arial Narrow', arial, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', arial, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red-ink: #FF6673;
    --ink: #F6F0F1;
    --ink-2: #B9AEB1;
    --paper: #130A0C;
    --gray: #1C1214;
    --stage: #241719;
    --line: #3B2B2E;
    --focus: #FFFFFF;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --red-ink: #FF6673;
  --ink: #F6F0F1;
  --ink-2: #B9AEB1;
  --paper: #130A0C;
  --gray: #1C1214;
  --stage: #241719;
  --line: #3B2B2E;
  --focus: #FFFFFF;

  color-scheme: dark;
}