/* ═══════════════════════════════════════════════════════════════
   Miss Coral — tokens.css v1
   Fuente única de tokens del sitio, derivada del Design Language
   LOCKED v1.1 (Brand/Miss_Coral_Design_Language.md) y del canon
   del paywall firmado (CMO/paywall/paywall_v2.html).

   Uso: <link rel="stylesheet" href="tokens.css" /> en cada página.
   Las páginas migran sus valores embebidos a var(--token) al
   tocarlas (decisión CTO Jul 16: sin big-bang; anillo A completo,
   B/C al pasar por ellas).

   Cambios a este archivo: propone Marisol, deploya CTO.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Paletas (idénticas a coral-app/src/theme/colors.ts) ── */
  --coral-50:#FFF5F0; --coral-100:#FFE8DE; --coral-200:#FFCBB4;
  --coral-300:#F5A68A; --coral-400:#E8896A; --coral-500:#DB724D;
  --coral-600:#C45D3A; --coral-700:#A14A2E; --coral-800:#7D3822;
  --coral-900:#5C2A19;

  --ocean-50:#F0F7F7; --ocean-100:#D6ECEB; --ocean-200:#A8D5D3;
  --ocean-300:#6BACA8; --ocean-400:#3D8B87; --ocean-500:#1B6B6A;
  --ocean-600:#155756; --ocean-700:#0F4342; --ocean-800:#0A302F;
  --ocean-900:#061E1E;

  --sand-50:#FFFCF9; --sand-100:#FFF8F2; --sand-200:#FFEEDE;
  --sand-300:#F5DFD0; --sand-400:#E8CCBB; --sand-500:#D4B5A3;
  --sand-600:#B8977F; --sand-700:#96765C; --sand-800:#6B5340;
  --sand-900:#3D2E22;

  --amber-50:#FFFBF0; --amber-100:#FFF3D6; --amber-200:#FFE6AD;
  --amber-300:#FFD580; --amber-400:#F5BF52; --amber-500:#E5A835;
  --amber-600:#C4891E; --amber-700:#9A6A14; --amber-800:#704C0E;
  --amber-900:#4A3209;

  /* ── Semánticos (regla 7): cálidos, nunca alarma ── */
  --success:#4A9E7E;
  --warning:#E5A835;
  --error:#C45D3A;

  /* ── Capa semántica DL — tema LIGHT (canon paywall) ── */
  --bg:#FFF8F2;
  --surface:#FFFDFB;
  --surface-2:#FBEEE4;
  --border:#EFDDCE;
  --border-strong:#E2C7B2;
  --ink:#2C1E17;
  --ink-2:#6C5A4F;
  --ink-3:#9C8577;

  --coral:#DB724D;                       /* acento / momento bold */
  --coral-deep:#A6482A;
  --coral-soft:rgba(219,114,77,0.10);
  --coral-tint:rgba(219,114,77,0.14);
  --coral-glow:rgba(219,114,77,0.34);

  /* CTA: coral, texto crema. Contraste botón: usar --coral-600 de
     fondo si el texto del botón es < 18px regular (AA). */
  --cta-bg:#DB724D;
  --cta-fg:#FFF8F2;
  --cta-shadow:rgba(184,74,40,0.34);

  /* Ocean = acento secundario + info states (regla 7, ley del verde).
     1–3 toques pequeños por pantalla, máximo. Nunca CTA ni hero. */
  --info:#3D8B87;
  --info-deep:#1B6B6A;
  --info-tint:rgba(61,139,135,0.12);
  --info-glow:rgba(61,139,135,0.30);

  /* Patrón Turing (regla 1): assets/pattern-turing.png tintado.
     Atmósfera, nunca protagonista. */
  --pattern-ink:#DB724D;
  --pattern-alpha:0.09;

  /* Ley del logo (regla 2, tabla de variantes v1.1) */
  --logo:#DB724D;                        /* colorway sobre crema */

  /* Sombras SIEMPRE cálidas (regla 3) — base #3D2E22, nunca gris frío */
  --shadow-sm:0 1px 3px rgba(61,46,34,0.06);
  --shadow-md:0 2px 8px rgba(61,46,34,0.08);
  --shadow-lg:0 4px 16px rgba(61,46,34,0.10);
  --shadow-glow:0 0 20px rgba(219,114,77,0.30);
}

/* ── Tema DARK (canon paywall). Hoy dark.html/en-dark.html son
   páginas separadas: al alinearlas usan este bloque vía atributo;
   la unificación con toggle es recomendación P3 aparte. ── */
[data-theme="dark"] {
  --bg:#000000;
  --surface:#0C0908;
  --surface-2:#151010;
  --border:#241812;
  --border-strong:#3A281E;
  --ink:#F6EDE6;
  --ink-2:#C7B2A3;
  --ink-3:#8C7869;

  --coral:#E6805A;                       /* sube para conservar peso sobre negro */
  --coral-deep:#E6805A;
  --coral-soft:rgba(230,128,90,0.10);
  --coral-tint:rgba(230,128,90,0.16);
  --coral-glow:rgba(230,128,90,0.42);

  --cta-bg:#DB724D;                      /* el CTA no cambia de modo */
  --cta-fg:#FFF8F2;
  --cta-shadow:rgba(219,114,77,0.55);

  --info:#6BACA8;                        /* ocean sube a 300 en dark */
  --info-deep:#6BACA8;
  --info-tint:rgba(107,172,168,0.14);
  --info-glow:rgba(107,172,168,0.35);

  --pattern-ink:#E6805A;
  --pattern-alpha:0.075;

  --logo:#FFFFFF;                        /* colorway sobre negro */

  --shadow-sm:0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:0 2px 8px rgba(0,0,0,0.55);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.6);
  --shadow-glow:0 0 20px rgba(230,128,90,0.35);
}

/* ── Utilidades DL ── */

/* Regla 6: toda cifra viva (precio, contador, horas) lleva tabulares. */
.numeric { font-variant-numeric: tabular-nums; }

/* Regla 1: banda de patrón Turing como atmósfera de hero/estados.
   Requiere assets/pattern-turing.png (mask alfa, se tinta por token). */
.brand-pattern {
  position: absolute; inset: 0 0 auto 0; height: 340px;
  background: var(--pattern-ink);
  opacity: var(--pattern-alpha);
  pointer-events: none;
  -webkit-mask-image: url("assets/pattern-turing.png");
  -webkit-mask-size: cover; -webkit-mask-position: center top;
  mask-image: url("assets/pattern-turing.png");
  mask-size: cover; mask-position: center top;
}