/* ============================================================================
   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, refinado) ---- */
  --color-bg:            #0b0e14;
  --color-surface:       #141925;
  --color-surface-2:     #1d2333;
  --color-surface-hover: #283044;
  --color-border:        #2b3346;
  --color-border-soft:   #1c2233;

  --color-text:          #eef1f7;
  --color-text-muted:    #97a1b5;
  --color-text-invert:   #0b0e14;

  --color-primary:       #4f7dff;
  --color-primary-hover: #6c93ff;
  --color-on-primary:    #ffffff;

  --color-danger:        #f0506a;
  --color-danger-hover:  #ff6b82;
  --color-success:       #2bbf7a;
  --color-focus-ring:    #6c93ff;

  /* ---- Tipografía ---- */
  --font-sans: "Plus Jakarta 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: 7px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  /* ---- Sombras (suaves y difusas) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow-md: 0 6px 18px rgba(0,0,0,.30);
  --shadow-lg: 0 18px 50px 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-event:    #f97316;
  --node-topic:    #9333ea;
  --node-goal:     #0d9488;
  --node-update:   #65a30d;
  --node-reminder: #dc2626;
  --node-say:      #db2777;
  --node-thought:  #0891b2;
  --node-message:  #0ea5e9;
  --node-tag:      #6366f1;
  --node-like:     #10b981;
  --node-dislike:  #f43f5e;

  /* Hace que los controles nativos (select, scrollbars) se pinten en oscuro. */
  color-scheme: dark;
}

/* Tema claro: solo reasignamos tokens semánticos (MANIFIESTO §3). */
:root[data-theme="light"] {
  --color-bg:            #f5f7fa;
  --color-surface:       #ffffff;
  --color-surface-2:     #eef1f6;
  --color-surface-hover: #e3e8f0;
  --color-border:        #dbe1ea;
  --color-border-soft:   #eceff4;
  --color-text:          #131826;
  --color-text-muted:    #5a6678;
  --color-text-invert:   #ffffff;
  color-scheme: light;
}