:root {
  /* ============================================================
     COLORES PRIMARIOS (acento elegante, no agresivo)
     ============================================================ */
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-primary-deep: #1e3a8a;
  --color-primary-soft: #dbeafe;
  --color-primary-tint: #eff6ff;
  --color-navy: #0f172a;

  /* ============================================================
     SIDEBAR — Negro obsidiana / carbón profundo
     ============================================================ */
  --color-sidebar-bg: #090d16;
  --color-sidebar-active-bg: #141b2d;
  --color-sidebar-border: #1e293b;
  --color-sidebar-text: #94a3b8;
  --color-sidebar-text-strong: #f8fafc;
  --color-sidebar-muted: #64748b;
  --color-sidebar-subtle: #475569;

  /* ============================================================
     FONDOS Y SUPERFICIES (sin blanco puro agresivo)
     ============================================================ */
  --color-bg: #e8e8e8;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #e2e8f0;
  --color-divider: #f1f5f9;
  --color-border-subtle: rgba(15, 23, 42, 0.06);

  /* ============================================================
     TEXTO
     ============================================================ */
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;
  --color-text-on-primary: #ffffff;
  --color-text-on-primary-soft: #e0e7ff;
  --color-text-on-primary-faint: #c7d2fe;

  /* ============================================================
     ESTADOS
     ============================================================ */
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  --color-warning-strong: #78350f;
  --color-warning-dot: #f59e0b;

  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  /* ============================================================
     GRADIENTES
     ============================================================ */
  --gradient-hero: linear-gradient(
    145deg,
    #090d16 0%,
    #0f172a 45%,
    #1e3a8a 100%
  );
  --gradient-sidebar: linear-gradient(180deg, #090d16 0%, #0b1220 100%);
  --gradient-card-shine: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );

  /* ============================================================
     GLASSMORPHISM
     ============================================================ */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-bg-dark: rgba(15, 23, 42, 0.55);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(14px);
  --glass-blur-sm: blur(8px);

  /* ============================================================
     TIPOGRAFÍA
     ============================================================ */
  --font-sans:
    "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;

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

  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --tracking-label: 0.08em;

  /* ============================================================
     ESPACIADO
     ============================================================ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ============================================================
     RADIOS (más orgánicos y modernos)
     ============================================================ */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  /* ============================================================
     SOMBRAS AVANZADAS (relieve y flotación)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-card:
    0 1px 2px rgb(15 23 42 / 0.03), 0 4px 16px rgb(15 23 42 / 0.06);
  --shadow-hover:
    0 4px 12px rgb(15 23 42 / 0.06), 0 12px 28px rgb(15 23 42 / 0.08);
  --shadow-modal:
    0 8px 24px rgb(15 23 42 / 0.08), 0 24px 48px rgb(15 23 42 / 0.12);
  --shadow-sidebar: 4px 0 24px rgb(0 0 0 / 0.25);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* Focus ring elegante */
  --focus-ring: 0 0 0 3px rgb(37 99 235 / 0.22);
  --focus-ring-danger: 0 0 0 3px rgb(220 38 38 / 0.22);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --sidebar-width: 16.5rem;
  --header-height: 4.25rem;
  --content-max-width: 90rem;

  /* ============================================================
     TRANSICIONES
     ============================================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-sidebar: 20;
  --z-header: 10;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}