/* ===================================================================
   Randall Chacón — tokens de color
   Se carga ANTES de tokens.css y style.css en todas las páginas. Única
   fuente de los colores del sitio: ninguna otra hoja escribe un color
   literal (hex, rgb, rgba, hsl o color-mix).

   Paleta aprobada por Randall (2026-10-18): negro y blanco puros, dorado
   rgb(214, 154, 45) y carbón para tarjetas. Reglas vigentes:
   SSOT/20_Operations/Infrastructure/Sitio_Web_Sistema_Visual_y_CSS.md
   (historia del proyecto: SSOT/90_Archive/Sitio_Web_Colores_2026-10/)

   CAPAS
   1. Primitivos (--color-*): valores. Solo se usan dentro de este
      archivo, para construir la capa 2.
   2. Semánticos: lo que consumen los componentes (--bg, --ink, --muted,
      --accent, --line, --ok…). Sus valores por defecto son los de fondo
      oscuro.
   3. Contextos: las bandas blancas y las tarjetas carbón solo reasignan
      semánticos; ningún componente redefine variables de color.

   REGLAS
   · Contraste WCAG 2.2 AA: 4.5:1 en texto, 3:1 en bordes de controles y
     foco. Los pares que se usan están en el README del proyecto.
   · El dorado no es texto sobre blanco (2.5:1): sobre blanco va solo como
     relleno de botón (--fill-accent) o filete decorativo.
   · Los estados (--ok, --err, --warn, --info) solo van sobre negro o
     carbón, siempre con ícono y texto: nunca solo color. El aviso
     comparte tono con el dorado; jamás rellena un botón.
   · Un color nuevo entra aquí primero, con decisión de Randall.
   · Única excepción fuera de este archivo: <meta name="theme-color"> de
     includes/head.php, que debe coincidir con --color-black.
   · Antes de subir (debe salir vacío):
     grep -rnE "#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|color-mix\(|var\(--color-" assets/css --exclude=colors.css
   =================================================================== */

:root {
  /* ── CAPA 1: PRIMITIVOS ── */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-charcoal: #1A1A1A;         /* tarjetas y paneles */

  --color-gold-300: #E3AC47;         /* hover */
  --color-gold-500: #D69A2D;         /* dorado de marca, rgb(214, 154, 45) */
  --color-gold-700: #7A5200;         /* dorado como texto sobre blanco (6.9:1) */

  --color-warm-300: #B5B1A7;         /* texto suave sobre oscuro */
  --color-warm-500: #8E8A7E;         /* texto tenue sobre oscuro */
  --color-gray-800: #3D3D3D;         /* texto suave sobre blanco */
  --color-gray-600: #595959;         /* texto tenue sobre blanco */

  --color-green-300: #6FCF97;
  --color-green-950: #10241A;
  --color-red-300: #EF8A80;
  --color-red-950: #2A1312;
  --color-amber-300: #E5A64A;
  --color-amber-950: #2A1D0A;
  --color-blue-300: #8EC5FF;
  --color-blue-950: #0F1D2E;

  /* Colores externos (no de marca): la bandera de Costa Rica del pie. */
  --flag-cr-blue: #002B7F;
  --flag-cr-white: #FFFFFF;
  --flag-cr-red: #CE1126;
  --flag-cr-edge: color-mix(in srgb, var(--color-black) 25%, transparent);

  /* Sombras: tres elevaciones más la del dorado. */
  --shadow-sm: 0 6px 18px color-mix(in srgb, var(--color-black) 14%, transparent);
  --shadow-md: 0 12px 28px color-mix(in srgb, var(--color-black) 28%, transparent);
  --shadow-lg: 0 20px 60px color-mix(in srgb, var(--color-black) 45%, transparent);
  --shadow-gold: 0 6px 18px color-mix(in srgb, var(--color-gold-500) 22%, transparent);

  /* ── CAPA 2: SEMÁNTICOS (valores sobre fondo oscuro) ── */
  --bg: var(--color-black);
  --bg-raised: var(--color-charcoal);   /* superficie elevada; transparente en algunas bandas */
  --card-bg: var(--color-charcoal);     /* tarjetas: siempre carbón */
  --ink: var(--color-white);
  --muted: var(--color-warm-300);
  --faint: var(--color-warm-500);

  /* Fuera de las bandas (navegación, pie, páginas legales) la línea es más tenue. */
  --line: color-mix(in srgb, var(--color-white) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--color-white) 45%, transparent); /* bordes de controles: ≥3:1 */

  --accent: var(--color-gold-500);       /* texto, bordes e íconos de acento */
  --accent-hover: var(--color-gold-300);
  --accent-soft: color-mix(in srgb, var(--color-gold-500) 12%, transparent);
  --accent-text: var(--color-gold-500);  /* dorado como texto; sobre blanco, --color-gold-700 */
  --fill-accent: var(--color-gold-500);  /* relleno de botón principal, en cualquier banda */
  --fill-accent-hover: var(--color-gold-300);
  --on-accent: var(--color-black);       /* texto sobre --fill-accent */

  --focus: var(--color-gold-500);
  --focus-on-light: var(--color-black);  /* contorno que se dibuja sobre una banda blanca */

  --wash: color-mix(in srgb, var(--color-white) 5%, transparent);
  --wash-strong: color-mix(in srgb, var(--color-white) 8%, transparent);
  --overlay: color-mix(in srgb, var(--color-black) 90%, transparent);

  --shadow: var(--shadow-lg);            /* componente elevado (marcos, tarjeta de precio) */
  --shadow-hover: var(--shadow-md);
  --shadow-accent: var(--shadow-gold);

  --ok: var(--color-green-300);
  --ok-tint: var(--color-green-950);
  --err: var(--color-red-300);
  --err-tint: var(--color-red-950);
  --warn: var(--color-amber-300);
  --warn-tint: var(--color-amber-950);
  --info: var(--color-blue-300);
  --info-tint: var(--color-blue-950);
}

/* ── CAPA 3: CONTEXTOS ── */

/* Bandas negras: la línea gana presencia frente a la de navegación y pie. */
.visual-band--black {
  --line: color-mix(in srgb, var(--color-white) 28%, transparent);
}

/* Fondo blanco: bandas blancas y la tarjeta clara del Kit. */
.visual-band--white,
.floating-proof {
  --bg: var(--color-white);
  --ink: var(--color-black);
  --muted: var(--color-gray-800);
  --faint: var(--color-gray-600);
  --line: color-mix(in srgb, var(--color-black) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--color-black) 60%, transparent);
  --accent: var(--color-black);
  --accent-hover: var(--color-black);
  --accent-soft: color-mix(in srgb, var(--color-black) 6%, transparent);
  --accent-text: var(--color-gold-700);
  --focus: var(--color-black);
  --wash: color-mix(in srgb, var(--color-black) 4%, transparent);
  --wash-strong: color-mix(in srgb, var(--color-black) 6%, transparent);
  --shadow: var(--shadow-md);
  --shadow-accent: var(--shadow-sm);
}

/* Superficies carbón: conservan texto claro y dorado también sobre banda
   blanca. Las tarjetas que solo son carbón sobre blanco se listan dentro
   de .visual-band--white; las demás lo son en cualquier banda. */
.card,
.services-offer,
.home .portfolio-card,
.website-page :is(.col-item, .portfolio-card, .pricing-card),
.consulting-page .col-item,
.visual-band--white :is(.form-panel, .pricing-card, .pilot-confirm, .service-form),
.product-page .visual-band--white :is(.pain-list article, .step-card, .bento-card, .instructor-card, .final-card, details, .price-card) {
  --bg: var(--color-black);
  --ink: var(--color-white);
  --muted: var(--color-warm-300);
  --faint: var(--color-warm-500);
  --line: color-mix(in srgb, var(--color-white) 28%, transparent);
  --line-strong: color-mix(in srgb, var(--color-white) 45%, transparent);
  --accent: var(--color-gold-500);
  --accent-hover: var(--color-gold-300);
  --accent-soft: color-mix(in srgb, var(--color-gold-500) 12%, transparent);
  --accent-text: var(--color-gold-500);
  --focus: var(--color-gold-500);
  --wash: color-mix(in srgb, var(--color-white) 5%, transparent);
  --wash-strong: color-mix(in srgb, var(--color-white) 8%, transparent);
  --shadow: var(--shadow-lg);
  --shadow-accent: var(--shadow-gold);
}

/* Barra de anuncio: fondo dorado; el foco usa el color de su texto. */
.announce-bar {
  --focus: var(--on-accent);
}