/* ==========================================================================
   Tokens de color — normativa completa en docs/colores.md
   Este archivo es portable: cópialo tal cual a otro proyecto.

   Dos capas:
   1. --palette-*  Colores en bruto. No se usan directamente en componentes.
   2. --color-*    Roles semánticos. Es lo único que usan los componentes.
   ========================================================================== */

:root {
  /* 1. Paleta ------------------------------------------------------------ */

  /* Neutros */
  --palette-ink: #16171d;           /* casi negro */
  --palette-charcoal-blue: #474954;
  --palette-blue-slate: #4a6670;
  --palette-paper: #f3f0ec;         /* casi blanco */

  /* Claros (resalte) */
  --palette-powder-blue: #a9b3ce;
  --palette-dusty-mauve: #9e788f;
  --palette-light-caramel: #f8bd7f;

  /* 2. Roles ------------------------------------------------------------- */

  /* Fondos y superficies (de más oscuro a más claro) */
  --color-bg: var(--palette-ink);
  --color-surface: color-mix(in srgb, var(--palette-charcoal-blue) 35%, var(--palette-ink));
  --color-surface-raised: var(--palette-charcoal-blue);
  /* vidrio translúcido con un toque de Blue Slate (tarjetas y botones sobre
     fondos con halo o dibujos) y el halo azulado del fondo */
  --color-surface-glass: color-mix(in srgb, var(--palette-blue-slate) 22%, transparent);
  --color-surface-glass-hover: color-mix(in srgb, var(--palette-blue-slate) 34%, transparent);
  --color-glow: color-mix(in srgb, var(--palette-blue-slate) 45%, transparent);

  /* Líneas */
  --color-border: color-mix(in srgb, var(--palette-blue-slate) 60%, transparent);
  --color-border-strong: var(--palette-blue-slate);

  /* Texto */
  --color-heading: var(--palette-dusty-mauve);        /* títulos */
  --color-text: var(--palette-paper);
  --color-text-soft: color-mix(in srgb, var(--palette-paper) 70%, var(--palette-ink)); /* secundario: pie, etiquetas, botones */
  --color-text-muted: var(--palette-powder-blue);
  --color-text-on-accent: var(--palette-ink);
  /* subtítulos de sección: Blue Slate aclarado con Paper (4.4 sobre Ink); el
     Slate puro se queda en 2.9 y no llega ni para texto grande */
  --color-subheading: color-mix(in srgb, var(--palette-blue-slate) 80%, var(--palette-paper));

  /* Etiquetas (portada): bloque malva sólido; texto oscuro para que se lea */
  --color-tag: var(--palette-dusty-mauve);
  --color-text-on-tag: var(--palette-ink);

  /* Tarjetas planas (índices de talleres): bloque Blue Slate sólido; texto
     Paper (5.4). Cuando el título de la página ya es malva */
  --color-card: var(--palette-blue-slate);
  --color-text-on-card: var(--palette-paper);

  /* Botones (navegación de los talleres): Powder Blue algo apagado (80 % sobre
     Ink) para que el paso a naranja en hover se note; texto Ink (5.9) */
  --color-button: color-mix(in srgb, var(--palette-powder-blue) 80%, var(--palette-ink));
  --color-text-on-button: var(--palette-ink);

  /* Acentos */
  --color-accent: var(--palette-light-caramel);      /* principal: CTA, hover, foco */
  --color-accent-soft: var(--palette-powder-blue);   /* secundario: detalles, etiquetas */
  --color-focus: var(--palette-light-caramel);
}