/* ─────────────────────────────────────────────────────────────────────────
 * tokens.css — Design System v2 (Editorial)
 *
 * Formalización del diseño de Me Quiero Ir como CSS custom properties.
 * Cargado ANTES de cualquier otro CSS local en cada HTML/SSR para que las
 * variables estén disponibles en toda la cascada.
 *
 * Filosofía:
 *   - Paleta editorial: coral, navy, cream, bone, warm-gray, saffron, forest, brick.
 *   - NO amarillos, NO naranjas, NO rojos puros. Sin excepciones.
 *   - Páginas standalone (calc, corredor) NO cargan app.min.css.
 *
 * Estado actual (2026-05-09):
 *   - Editorial Palette declarada. CSS existentes heredan via --brand-* backward-compat.
 *   - --cream, --navy, --bone, --warm-gray, --saffron se adoptan en pasos siguientes
 *     (calculadora.css → corredor.css → hero-quiz.css).
 *   - Aliases marcados se eliminan cuando el CSS hijo migra al token directo.
 *
 * NO modificar tokens existentes sin verificar todos sus consumidores.
 * Ver Docs/PASO-2-plan-tecnico.md y CLAUDE.md (sección "Decisiones de diseño").
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Editorial Palette ──────────────────────────────────────────────── */
  --coral:      #E8385A;  /* CTAs, acentos primarios */
  --coral-dark: #C92848;  /* hover de coral */
  --navy:       #1a2148;  /* texto principal editorial */
  --cream:      #FAF6F0;  /* fondo warm editorial */
  --bone:       #F0EAE0;  /* separadores y bordes cálidos */
  --warm-gray:  #6B6660;  /* texto secundario editorial */
  --saffron:    #D9A441;  /* premium, destacados */
  --forest:     #2D4A3E;  /* success */
  --brick:      #A4453B;  /* warning/error */

  /* ── Brand scale (backward-compat → derivado de coral) ───────────────── */
  --brand-50:  #fff1f3;  /* fondos suaves */
  --brand-100: #fdd6df;  /* pills, hover states */
  --brand-200: #f9b0bc;  /* bordes decorativos */
  --brand-300: #f48898;  /* bordes activos */
  --brand-500: #E8385A;  /* = --coral, PRIMARY — CTAs */
  --brand-600: #C92848;  /* = --coral-dark, hover */
  --brand-700: #a81e38;  /* texto sobre fondo claro */
  --brand-800: #8c1430;  /* texto sobre brand-100 */

  /* ── Neutral (texto y fondos) ──────────────────────────────────────── */
  --neutral-50:  #f7f7fa;  /* fondo nav, banners light */
  --neutral-100: #f3f4f8;  /* FONDO PÁGINA principal */
  --neutral-200: #e5e7eb;  /* bordes sutiles, separadores */
  --neutral-300: #cbd5e1;  /* bordes, deshabilitado */
  --neutral-400: #94a3b8;  /* placeholder, status "no aplica" */
  --neutral-500: #6b7280;  /* texto secundario */
  --neutral-600: #4b5563;  /* texto body */
  --neutral-700: #374151;  /* texto medio */
  --neutral-800: #1f2937;  /* headings secundarios */
  --neutral-900: #0f172a;  /* TEXTO PRINCIPAL, headings */

  /* ── Status semántico ──────────────────────────────────────────────── */
  --success-500:    #2D4A3E;  /* = --forest, border "calificás" */
  --success-700:    #1a2e25;  /* forest dark, text "calificás" */
  --ineligible-500: #94a3b8;  /* border "no aplica" */
  --ineligible-700: #475569;  /* text "no aplica" */

  /* ── Surface ───────────────────────────────────────────────────────── */
  --surface-white: #ffffff;
  --surface-soft:  #f9fafb;  /* CTA register card, ghost button hover */

  /* ── Tipografía ────────────────────────────────────────────────────── */
  --font-heading: 'Fraunces', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Sans', monospace;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 18px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.12);

  /* ── Borders con alpha ─────────────────────────────────────────────── */
  --border-subtle:  rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.08);
  --border-medium:  rgba(15, 23, 42, 0.10);
  --border-strong:  rgba(15, 23, 42, 0.18);

  /* ── Focus ring brand ─────────────────────────────────────────────── */
  --focus-ring-brand: 0 0 0 3px rgba(232, 56, 90, 0.18);

  /* ─────────────────────────────────────────────────────────────────────
   * ALIASES — backward-compat. Se eliminan cuando el CSS hijo migra al token directo.
   * ───────────────────────────────────────────────────────────────────── */

  /* Texto: variantes de neutral-900 */
  --text-violet-tinted:    #1a1a2e;  /* body en calc/cor — migrar a --navy en pasada futura */
  --neutral-nav-hover:     #17212b;
  --neutral-inverse-hover: #1e293b;

  /* Surfaces auxiliares */
  --brand-50-soft: #fdf0f3;  /* era #fef3f6 — tinte coral suave */

  /* Hero-quiz legacy */
  --legacy-quiz-text-soft:       #5a5868;
  --legacy-quiz-placeholder:     #8c8a99;
  --legacy-quiz-eligible-border: #16a34a;  /* TODO: migrar a --forest */
  --legacy-quiz-maybe-border:    #A4453B;  /* era amarillo #ca8a04 → ahora = --brick */

  /* Status error → brick */
  --status-error: #A4453B;  /* era rojo puro #b91c1c → ahora = --brick */
}