/*
 * tokens.css — Fuente única de verdad de color y medidas base.
 *
 * Contexto: la app acumuló cinco vocabularios de color en paralelo
 *  1. tailwind.config.js  -> escala Material (primary, surface, ...)
 *  2. input.css :root     -> vars legacy (--primary, --gray-*)
 *  3. landing.css         -> --lp-*
 *  4. ui-refresh.css      -> --ui-*
 *  5. hex crudo en templates
 *
 * Este archivo no reemplaza a todos todavía: define la rampa de marca una sola
 * vez y los demás sistemas la referencian. Los valores son EXACTAMENTE los que
 * ya estaban en uso, así que la migración es visualmente neutra.
 *
 * Debe cargarse ANTES que output.css, ui-refresh.css, motion.css y landing.css.
 */

:root {
  /* ── Neutros ──────────────────────────────────────────────────────── */
  --brand-ink: #281813;        /* texto principal */
  --brand-ink-soft: #604a40;   /* texto secundario */
  --brand-ink-muted: #5c4038;  /* on-surface-variant */
  --brand-paper: #fffaf6;      /* fondo de página (landing/auth) */
  --brand-surface: #ffffff;    /* tarjetas, inputs */
  --brand-surface-alt: #fff8f6;/* fondo de página (app) */
  --brand-line: #ead8cf;       /* bordes suaves */
  --brand-line-strong: #e5beb3;/* outline-variant */

  /* ── Oscuros de banda ─────────────────────────────────────────────── */
  --brand-deep: #2a140f;
  --brand-deep-2: #7a1a0e;

  /* ── Acento carnaval ──────────────────────────────────────────────── */
  /* La rampa tiene dos rojos por accesibilidad, no por descuido:
     --brand-red  #e61a2f  -> 4.45:1 sobre papel. Solo relleno, degradados
                              y texto >=24px. NO texto pequeño.
     --brand-red-deep #ab2f00 -> 6.38:1 sobre superficie. Texto pequeño,
                              enlaces y acentos legibles. */
  --brand-red: #e61a2f;
  --brand-red-deep: #ab2f00;
  --brand-orange: #f49921;
  --brand-orange-deep: #c84512;
  --brand-orange-dark: #96300f;
  --brand-yellow: #fcc111;
  --brand-gold: #b97813;
  --brand-green: #009640;

  /* ── Feedback ─────────────────────────────────────────────────────── */
  --brand-error: #ba1a1a;
  --brand-error-container: #ffdad6;
  --brand-on-error-container: #93000a;

  /* ── Degradado de marca (4 colores del Carnaval) ──────────────────── */
  --brand-line-gradient: linear-gradient(
    90deg,
    #e61a2f 0%,
    #f49921 34%,
    #fcc111 56%,
    #009640 100%
  );

  /* ── Estados semánticos ───────────────────────────────────────────────
     Antes vivían como hex sueltos en macros.html, dashboard_content.html,
     analisis_*.html. Mismos valores, ahora nombrados. */
  --status-primary: #c84512;
  --status-primary-bg: #fef2ee;
  --status-risk: #e53935;
  --status-risk-strong: #dc2626;
  --status-risk-soft: #fecaca;
  --status-risk-bg: #fef2f2;
  --status-warn: #f4b400;
  --status-warn-strong: #ca8a04;
  --status-warn-soft: #fef9c3;
  --status-warn-bg: #fffbeb;
  --status-ok: #2e9e44;
  --status-ok-strong: #16a34a;
  --status-ok-soft: #dcfce7;
  --status-ok-tint: #f6fdf7;
  --status-ok-bg: #f0fdf4;

  /* ── Neutros de interfaz ──────────────────────────────────────────── */
  --neutral-300: #ececec;
  --neutral-400: #e5e5e5;
  --neutral-500: #6b7280;

  /* ── Escala de marca extendida ────────────────────────────────────── */
  --brand-ink-strong: #2b1b17;   /* casi idéntico a --brand-ink #281813 */
  --brand-gold-light: #d4af37;
  --brand-secondary-deep: #835500;
  --brand-tertiary-deep: #006b2d;

  /* ── Medidas base ─────────────────────────────────────────────────── */
  --radius-base: 1.25rem;
  --maxw-content: 78rem;
}