/* ==========================================================================
   @comunmedia/tokens — Dirección "Acero" (aprobada por Jorge por WhatsApp, 10:52 19 oct 2026)
   Capa 1: primitivas (valores crudos, no usar directamente en componentes)
   Capa 2: tokens semánticos (los que consumen los componentes)
   Apps: CRM (estreno), Projects, Gantt, Ágora. Importar una sola vez:
   @import '@comunmedia/tokens/tokens.css';
   ========================================================================== */

:root {
  /* ---- Capa 1 · Primitivas ---- */
  --cm-white: #ffffff;
  --cm-zinc-50: #fafafb;
  --cm-zinc-100: #f0f0f2;
  --cm-zinc-200: #e9e9ec;
  --cm-zinc-300: #d4d4d8;
  --cm-zinc-500: #71717a;
  --cm-zinc-900: #18181b;

  --cm-blue-600: #2357d6;
  --cm-blue-700: #1d4ed8;
  --cm-blue-50: #e8effc;

  --cm-green-600: #16a34a;
  --cm-green-50: #e5f5ea;
  --cm-amber-700: #b45309;
  --cm-amber-50: #f8ecd9;
  --cm-red-600: #dc2626;
  --cm-red-50: #fdeaea;

  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-6: 24px;
  --cm-space-8: 32px;

  --cm-radius-sm: 6px;
  --cm-radius-md: 8px;

  --cm-font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --cm-text-caption: 12px;
  --cm-text-body: 13px;
  --cm-text-title: 15px;
  --cm-text-display: 26px;

  /* ---- Capa 2 · Semánticos (usar estos) ---- */
  --cm-bg: var(--cm-white);
  --cm-surface: var(--cm-white);
  --cm-panel: var(--cm-zinc-50);
  --cm-ink: var(--cm-zinc-900);
  --cm-muted: var(--cm-zinc-500);
  --cm-line: var(--cm-zinc-200);
  --cm-line-strong: var(--cm-zinc-300);

  --cm-accent: var(--cm-blue-600);
  --cm-accent-hover: var(--cm-blue-700);
  --cm-accent-ink: var(--cm-blue-700);
  --cm-accent-soft: var(--cm-blue-50);
  --cm-on-accent: var(--cm-white);

  --cm-ok: var(--cm-green-600);
  --cm-ok-soft: var(--cm-green-50);
  --cm-warn: var(--cm-amber-700);
  --cm-warn-soft: var(--cm-amber-50);
  --cm-danger: var(--cm-red-600);
  --cm-danger-soft: var(--cm-red-50);

  --cm-radius-btn: var(--cm-radius-sm);
  --cm-radius-card: var(--cm-radius-md);
  --cm-radius-tag: var(--cm-radius-sm);

  --cm-font-display: var(--cm-font-sans);
  --cm-shadow-none: none;
  --cm-shadow-lg: 0 10px 32px rgba(24, 24, 27, 0.14);
}