/* =========================================================================
   Vytts — Design Tokens (fuente de verdad ÚNICA)
   Herramienta de datos B2B: calma, densa, confiable. Un solo acento de marca.
   Nada de color/tamaño suelto en las pantallas: todo deriva de acá.
   ========================================================================= */

:root {
  /* --- Neutros: rampa slate (9 pasos). El 90% de la UI vive acá. --- */
  --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;

  /* --- Superficies / texto / bordes (semánticos de UI) --- */
  --surface:        #ffffff;
  --surface-sunken: var(--gray-50);
  --surface-raised: #ffffff;
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --text:           var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-on-primary:#ffffff;

  /* --- Primario: azul de marca. ÚNICO acento. --- */
  /* Solo: acción primaria, nav activo, foco, links. Nunca decoración. */
  --primary:        #2F80FF;
  --primary-hover:  #1f6ae6;
  --primary-active: #1857c4;
  --primary-soft:   #eef4ff;
  --primary-border: #bcd6ff;

  /* --- Marca Vytts: navy + degradé azul→violeta (CTAs principales, logo). --- */
  --brand-navy:   #0A1228;
  --brand-blue:   #2F80FF;
  --brand-violet: #7B4DFF;
  --brand-grad:   linear-gradient(135deg, #2F80FF, #7B4DFF);

  /* --- Semánticos: SOLO estado (éxito / advertencia / peligro). --- */
  --success: #059669; --success-soft: #ecfdf5; --success-border: #a7f3d0;
  --warning: #d97706; --warning-soft: #fffbeb; --warning-border: #fde68a;
  --danger:  #dc2626; --danger-soft:  #fef2f2; --danger-border:  #fecaca;
  --info:    var(--primary); --info-soft: var(--primary-soft);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* --- Tipografía: system-ui (cero dependencias) + mono para códigos. --- */
  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Escala 12 / 14 / 16 / 20 / 24 / 32 (14 = base de tablas densas) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

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

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

  /* --- Espaciado base-4. Todo padding/margin sale de acá. --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* --- Radio: uno (dos como mucho). --- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   8px;
  --radius-full: 999px;

  /* --- Elevación mínima: bordes finos > sombras pesadas. --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);

  /* --- Layout / movimiento --- */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --duration:  150ms;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   Dark — overrides. No es el default; se activa con [data-theme="dark"].
   ========================================================================= */
[data-theme="dark"] {
  --surface:        #0f172a;
  --surface-sunken: #0b1120;
  --surface-raised: #1e293b;
  --border:         #1e293b;
  --border-strong:  #334155;
  --text:           #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;

  --primary:        #4f8fff;
  --primary-hover:  #6ea3ff;
  --primary-active: #93bbff;
  --primary-soft:   #0e1c3a;
  --primary-border: #23407e;

  --success-soft: #052e2b; --success-border: #065f46;
  --warning-soft: #2a1c05; --warning-border: #92400e;
  --danger-soft:  #2a0f0f; --danger-border:  #991b1b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}