/* ============================================================================
   DESIGN TOKENS — única fuente de constantes visuales (MANIFIESTO §3).
   Ningún componente usa literales: todos consumen estas variables.
   El theming (claro/oscuro) se logra reasignando tokens, sin tocar componentes.
   ========================================================================== */

:root {
  /* ---- Paleta cruda (no usar directamente en componentes; mapear abajo) ---- */
  --c-slate-50:  #f8fafc;  --c-slate-100: #f1f5f9;  --c-slate-200: #e2e8f0;
  --c-slate-300: #cbd5e1;  --c-slate-400: #94a3b8;  --c-slate-500: #64748b;
  --c-slate-600: #475569;  --c-slate-700: #334155;  --c-slate-800: #1e293b;
  --c-slate-900: #0f172a;  --c-slate-950: #020617;

  --c-blue-400:  #60a5fa;  --c-blue-500:  #3b82f6;  --c-blue-600:  #2563eb;
  --c-red-500:   #ef4444;  --c-red-600:   #dc2626;
  --c-green-500: #22c55e;  --c-green-600: #16a34a;
  --c-amber-500: #f59e0b;
  --c-white:     #ffffff;

  /* ---- Tokens semánticos: color (tema oscuro por defecto) ---- */
  --color-bg:            var(--c-slate-950);
  --color-surface:       var(--c-slate-900);
  --color-surface-2:     var(--c-slate-800);
  --color-surface-hover: var(--c-slate-700);
  --color-border:        var(--c-slate-700);
  --color-border-soft:   var(--c-slate-800);

  --color-text:          var(--c-slate-100);
  --color-text-muted:    var(--c-slate-400);
  --color-text-invert:   var(--c-slate-900);

  --color-primary:       var(--c-blue-600);
  --color-primary-hover: var(--c-blue-500);
  --color-on-primary:    var(--c-white);

  --color-danger:        var(--c-red-600);
  --color-danger-hover:  var(--c-red-500);
  --color-success:       var(--c-green-600);
  --color-focus-ring:    var(--c-blue-400);

  /* ---- Tipografía ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ---- Espaciado (escala 4px) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.45);

  /* ---- Transiciones ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(.4,0,.2,1);

  /* ---- z-index ---- */
  --z-sticky: 100;
  --z-modal:  1000;
  --z-toast:  1100;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --maxw-content: 1100px;

  /* ---- Tokens por tipo de nodo (espejan node_types() en PHP) ---- */
  --node-friend:   #2563eb;
  --node-note:     #f59e0b;
  --node-plan:     #16a34a;
  --node-topic:    #9333ea;
  --node-goal:     #0d9488;
  --node-update:   #65a30d;
  --node-reminder: #dc2626;
  --node-say:      #db2777;
  --node-thought:  #0891b2;
}

/* Tema claro: solo reasignamos tokens semánticos (MANIFIESTO §3). */
:root[data-theme="light"] {
  --color-bg:            var(--c-slate-100);
  --color-surface:       var(--c-white);
  --color-surface-2:     var(--c-slate-50);
  --color-surface-hover: var(--c-slate-200);
  --color-border:        var(--c-slate-300);
  --color-border-soft:   var(--c-slate-200);
  --color-text:          var(--c-slate-900);
  --color-text-muted:    var(--c-slate-500);
  --color-text-invert:   var(--c-white);
}