/* ════════════════════════════════════════════════════════════════════════
   00_tokens.css — Design tokens (contrato del design system, spec §2.1)

   Regla: los tokens EXISTENTES conservan su nombre y su valor actual
   (cero regresión); los nuevos solo se agregan. La paleta neutral se
   congela en slate. Los hex hardcodeados del legacy se drenan módulo a
   módulo hacia estos tokens (Fase 3).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ============ EXISTENTES (valores actuales del application.css) ============ */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-bg: #f1f5f9;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px;

  /* ============ NEUTRALES — escala slate única ============ */
  --gray-50:  #f8fafc;  --gray-100: #f1f5f9;  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;  --gray-400: #94a3b8;  --gray-500: #64748b;
  --gray-600: #475569;  --gray-700: #334155;  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ============ SEMÁNTICOS con fondo tintado y borde ============ */
  --c-primary: var(--color-primary);
  --c-primary-bg: #eff6ff;     --c-primary-border: #bfdbfe;
  --c-success: #16a34a;        --c-success-bg: #f0fdf4;   --c-success-border: #bbf7d0;
  --c-danger:  #dc2626;        --c-danger-bg:  #fef2f2;   --c-danger-border:  #fecaca;
  --c-warning: #d97706;        --c-warning-bg: #fffbeb;   --c-warning-border: #fde68a;
  --c-info:    #0284c7;        --c-info-bg:    #f0f9ff;   --c-info-border:    #bae6fd;
  /* Acciones con costo de IA / dinero (absorbe .btn-grok) */
  --c-cost:    #7c3aed;        --c-cost-bg:    #f5f3ff;   --c-cost-border:    #ddd6fe;

  /* ============ TONOS DE ESTADO (promueve los 13 .wm-c-* a globales; los reusa --mlb-st-*) ===== */
  --state-slate:#64748b;  --state-slate-bg:#f1f5f9;
  --state-violet:#7c3aed; --state-violet-bg:#f5f3ff;
  --state-indigo:#4f46e5; --state-indigo-bg:#eef2ff;
  --state-purple:#9333ea; --state-purple-bg:#faf5ff;
  --state-green:#16a34a;  --state-green-bg:#f0fdf4;
  --state-red:#dc2626;    --state-red-bg:#fef2f2;
  --state-amber:#d97706;  --state-amber-bg:#fffbeb;
  --state-orange:#ea580c; --state-orange-bg:#fff7ed;
  --state-blue:#2563eb;   --state-blue-bg:#eff6ff;
  --state-emerald:#059669;--state-emerald-bg:#ecfdf5;
  --state-gray:#6b7280;   --state-gray-bg:#f3f4f6;
  --state-rose:#e11d48;   --state-rose-bg:#fff1f2;
  --state-sky:#0284c7;    --state-sky-bg:#f0f9ff;

  /* ============ ESPACIADO (base 4px — mata los style="" inline) ============ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;

  /* ============ TIPOGRAFÍA ============ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;     /* local @font-face */
  --font-display: "Barlow Condensed", var(--font-sans);                       /* local; solo bot ML */
  --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 0.95rem;
  --text-lg: 1.1rem;  --text-xl: 1.35rem; --text-2xl: 1.7rem;

  /* ============ HOVER FUERTE de los semánticos ============ */
  --c-danger-strong: #b91c1c;
  --c-cost-strong: #6d28d9;

  /* ============ PALETA SOBRE FONDO OSCURO (toasts, sidebar) ============ */
  --on-dark-green: #4ade80;   --on-dark-red: #fca5a5;    --on-dark-red-soft: #fecaca;
  --on-dark-amber: #fde68a;   --on-dark-sky: #7dd3fc;    --on-dark-blue: #93c5fd;
  --on-dark-blue-strong: #60a5fa;
  --surface-dark-red: #7f1d1d;  --surface-dark-amber: #78350f;

  /* ============ RADIOS / SOMBRAS / Z ============ */
  --radius-sm: 4px;  --radius-full: 999px;       /* --radius y --radius-lg existentes */
  --z-sticky: 10; --z-drawer: 40; --z-overlay: 50; --z-toast: 60; --z-dialog: 70;
}

/* ============ BREAKPOINTS CONGELADOS (comentario-contrato; CSS no soporta var() en @media) =====
   — mobile:  max-width 640px
   — tablet:  max-width 900px
   — wide:    min-width 1280px
   Todo CSS nuevo usa SOLO estos 3 valores. El legacy (16 valores distintos) converge al migrar
   cada módulo. Mobile-first en código nuevo.
================================================================================================ */