/* Plantilla DS — tokens de color (tokens/colors.css) · FUENTE DE VERDAD
   ────────────────────────────────────────────────────────────────────────
   Estilo: base off-white cálida, texto granito, un acento profundo y otro
   secundario frío, más un cálido de remate. Nunca neón, nunca saturado.

   CÓMO RE-TEMATIZAR: cambia SOLO el bloque 1 (paleta de marca). Todo lo
   demás — tintes, mallas, trazos, glow, focus ring — se deriva con
   color-mix(), así que sigue tu marca sin tocar nada más.

   Requiere color-mix() (Chrome 111+, Safari 16.2+, Firefox 113+). Si
   necesitas navegadores anteriores, sustituye los color-mix por rgba()
   equivalentes a mano.                                                    */

:root {
  /* ═══ 1. PALETA DE MARCA ═══════════════════════════════════════════════
     Paleta "petróleo y bronce" de juanballesterosia.com: verde petróleo
     profundo (recoge la luz de escenario de las fotos), índigo pizarra de
     apoyo, hielo para los fondos oscuros y bronce de remate. Contraste del
     acento sobre papel: 7.6:1.                                           */

  /* Acento primario: CTAs, iconos, énfasis, enlaces */
  --brand:        #14595E;
  --brand-deep:   #0D4247;   /* variante oscura: hover de botón y enlace */
  --brand-soft:   #7FA6A8;   /* variante desaturada: numeración, apoyos  */
  --brand-tint:   #E1EDED;   /* fondo teñido: pastillas de icono, hover  */

  /* Acento secundario: segundo color de los gradientes, apoyos */
  --brand-2:      #33456B;
  --brand-2-deep: #242F4C;
  --brand-2-tint: #E5E8F0;

  /* Claro frío: acentos legibles SOBRE fondo oscuro (enlaces del footer,
     foco de formulario invertido, cursor del borrador…) */
  --brand-cool:      #C4DCDD;
  --brand-cool-tint: #EDF5F5;

  /* Cálido: remate del gradiente de marca y énfasis sobre oscuro */
  --brand-warm:      #C98A3C;
  --brand-warm-tint: #F5E9D6;

  /* ═══ 2. NEUTROS ═══════════════════════════════════════════════════════
     Papel cálido (nunca blanco puro) y escala de texto granito (nunca
     negro puro). Cambiar la temperatura del papel cambia el carácter de
     todo el sitio: vale la pena tocarla con cuidado.                     */
  --paper:   #FAF8F4;   /* lienzo de página */
  --paper-2: #F4F0E8;   /* superficie hundida (secciones alternas) */
  --stone-1: #EAE4D8;
  --stone-2: #DAD2C2;
  --stone-3: #BDB3A0;

  --ink:   #1E1E1C;     /* texto principal / superficie invertida */
  --ink-2: #4B4A45;     /* texto secundario */
  --ink-3: #706D65;   /* oscurecido: a #807D73 daba 3.88:1 sobre papel y no pasaba AA */     /* texto atenuado */

  /* ═══ 3. ESTADOS ═══════════════════════════════════════════════════════ */
  --success: var(--brand);
  --warning: #B0761F;
  --error:   #A94A33;

  /* ═══ 4. ALIAS SEMÁNTICOS ══════════════════════════════════════════════
     Lo que usan los componentes. Regla: en el CSS de componentes NO se
     escribe nunca un hex ni un nombre de la paleta cruda salvo para
     variantes puntuales; se usa siempre uno de estos alias.              */
  --text-body:      var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-inverse:   var(--paper);
  --text-accent:    var(--brand);

  --surface-page:    var(--paper);
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--paper-2);
  --surface-inverse: var(--ink);

  --accent-primary:   var(--brand);
  --accent-secondary: var(--brand-2);

  --border-subtle: color-mix(in srgb, var(--ink) 8%,  transparent);
  --border-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  /* ═══ 5. TEXTURA Y GRADIENTES ══════════════════════════════════════════ */

  /* Trazos de la textura topográfica (líneas de 1px, 5–10% de opacidad) */
  --topo-stroke-brand: color-mix(in srgb, var(--brand) 9%, transparent);
  --topo-stroke-grey:  color-mix(in srgb, var(--ink) 6%,  transparent);

  /* Gradiente de marca: recorre los cuatro acentos. Se usa en el borde de
     la tarjeta destacada y como firma en piezas de marca. */
  --gradient-brand: linear-gradient(120deg,
    var(--brand) 0%, var(--brand-2) 40%, var(--brand-cool) 72%, var(--brand-warm) 100%);

  /* Énfasis de titular (<em>): sobre claro y sobre oscuro */
  --gradient-emphasis:      linear-gradient(115deg, var(--brand) 0%, var(--brand-2) 75%);
  --gradient-emphasis-dark: linear-gradient(115deg, var(--brand-cool) 0%, var(--brand-warm) 95%);

  /* Mallas (mesh) suaves de fondo. Nunca duras, nunca neón: son manchas de
     luz muy diluidas que dan profundidad sin robar protagonismo. */
  --mesh-dawn:
    radial-gradient(42% 55% at 18% 22%, color-mix(in srgb, var(--brand)      16%, transparent) 0%, transparent 70%),
    radial-gradient(50% 60% at 82% 18%, color-mix(in srgb, var(--brand-cool) 55%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 72% 78%, color-mix(in srgb, var(--brand-warm) 14%, transparent) 0%, transparent 70%),
    radial-gradient(38% 48% at 28% 82%, color-mix(in srgb, var(--brand-2)    14%, transparent) 0%, transparent 70%);
  --mesh-deep:
    radial-gradient(50% 65% at 20% 30%, color-mix(in srgb, var(--brand)      22%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, color-mix(in srgb, var(--brand-2)    18%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 65% 85%, color-mix(in srgb, var(--brand-cool) 45%, transparent) 0%, transparent 70%);
}