/* ============================================================
   Design tokens — Panel Promo
   Glassmorphism refinado: fondos con profundidad, blur real,
   superficies translúcidas, acento violeta con carácter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Tipografía --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Syne", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  38px;

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

  --leading-tight:  1.15;
  --leading-normal: 1.5;

  /* --- Espaciado (escala 4) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Radios --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  /* --- Curvas --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease:        var(--ease-out);
  --ease-spring: var(--ease-out);

  --dur-press:   140ms;
  --dur-tooltip: 150ms;
  --dur-menu:    200ms;
  --dur-modal:   260ms;

  --transition-fast: var(--dur-press)   var(--ease-out);
  --transition:      var(--dur-menu)    var(--ease-out);
  --transition-slow: var(--dur-modal)   var(--ease-out);

  /* --- Layout --- */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            58px;
  --content-max:         1300px;
}

/* ================= TEMA OSCURO (por defecto) ================= */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Fondos — muy oscuros con tinte índigo-negro */
  --surface-0:        #07080f;   /* fondo app base */
  --surface-1:        rgba(12, 13, 22, 0.72);   /* sidebar/bars — translúcido para blur */
  --surface-2:        rgba(18, 19, 32, 0.60);   /* cards */
  --surface-3:        rgba(30, 32, 52, 0.55);   /* hover / inputs */
  --surface-elevated: rgba(20, 22, 38, 0.85);   /* modales */

  /* Manchas de luz del fondo (usadas en body::before) */
  --orb-1: #5b3ff0;   /* violeta primario */
  --orb-2: #1a0d40;   /* índigo profundo */
  --orb-3: #0d2440;   /* azul marino */
  --orb-4: #2d0a5c;   /* violeta oscuro */

  --border:        rgba(90, 100, 160, 0.18);
  --border-strong: rgba(120, 130, 200, 0.28);
  --border-glass:  rgba(255, 255, 255, 0.07);

  --text:         rgba(230, 234, 255, 0.92);
  --text-muted:   rgba(140, 150, 195, 0.85);
  --text-subtle:  rgba(90, 100, 150, 0.7);
  --text-inverse: #07080f;

  /* Acento violeta — más saturado y brillante que antes */
  --accent:       #7c5cff;
  --accent-hover: #9478ff;
  --accent-soft:  rgba(124, 92, 255, 0.15);
  --accent-glow:  rgba(124, 92, 255, 0.35);
  --accent-text:  #c4b5ff;

  --success:      #1de99b;
  --success-soft: rgba(29, 233, 155, 0.12);
  --danger:       #ff4d72;
  --danger-soft:  rgba(255, 77, 114, 0.12);
  --warn:         #ffb830;
  --warn-soft:    rgba(255, 184, 48, 0.12);
  --info:         #22d8e0;
  --info-soft:    rgba(34, 216, 224, 0.12);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 30px rgba(124, 92, 255, 0.25);

  --overlay: rgba(4, 4, 12, 0.78);

  /* Blur values */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(28px);
}

/* ================= TEMA CLARO ================= */
:root[data-theme="light"] {
  color-scheme: light;

  --surface-0:        #f0f0f8;
  --surface-1:        rgba(255, 255, 255, 0.75);
  --surface-2:        rgba(255, 255, 255, 0.65);
  --surface-3:        rgba(240, 240, 252, 0.70);
  --surface-elevated: rgba(255, 255, 255, 0.92);

  --orb-1: #c9b8ff;
  --orb-2: #e0d5ff;
  --orb-3: #b8d4ff;
  --orb-4: #d5c0ff;

  --border:        rgba(100, 90, 180, 0.14);
  --border-strong: rgba(100, 90, 180, 0.24);
  --border-glass:  rgba(255, 255, 255, 0.6);

  --text:         #18192e;
  --text-muted:   #545878;
  --text-subtle:  #9298b8;
  --text-inverse: #ffffff;

  --accent:       #6c47ff;
  --accent-hover: #5535e8;
  --accent-soft:  rgba(108, 71, 255, 0.10);
  --accent-glow:  rgba(108, 71, 255, 0.20);
  --accent-text:  #5535e8;

  --success:      #0aad6e;
  --success-soft: rgba(10, 173, 110, 0.10);
  --danger:       #e03060;
  --danger-soft:  rgba(224, 48, 96, 0.10);
  --warn:         #d98309;
  --warn-soft:    rgba(217, 131, 9, 0.10);
  --info:         #0a92a3;
  --info-soft:    rgba(10, 146, 163, 0.10);

  --shadow-xs: 0 1px 3px rgba(20,24,60,0.08);
  --shadow-sm: 0 2px 10px rgba(20,24,60,0.10);
  --shadow-md: 0 8px 30px rgba(20,24,60,0.12);
  --shadow-lg: 0 20px 60px rgba(20,24,60,0.16);
  --shadow-glow: 0 0 30px rgba(108, 71, 255, 0.15);

  --overlay: rgba(16, 18, 50, 0.45);

  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(28px);
}

/* Transición suave de tema */
:root.theme-transition,
:root.theme-transition * {
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition) !important;
}