/**
 * Punto Educativo Enterprise Design System — Tokens
 * Paleta: carbón industrial · azul petróleo · cyan eléctrico
 */
:root {
  /* Tipografía */
  --we-font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --we-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Espaciado (8px grid) */
  --we-space-1: 0.25rem;
  --we-space-2: 0.5rem;
  --we-space-3: 0.75rem;
  --we-space-4: 1rem;
  --we-space-5: 1.25rem;
  --we-space-6: 1.5rem;
  --we-space-8: 2rem;
  --we-space-10: 2.5rem;
  --we-space-12: 3rem;

  /* Radios */
  --we-radius-sm: 0.5rem;
  --we-radius: 0.75rem;
  --we-radius-lg: 1rem;
  --we-radius-xl: 1.25rem;
  --we-radius-2xl: 1.5rem;
  --we-radius-full: 9999px;

  /* Transiciones */
  --we-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --we-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --we-duration-fast: 150ms;
  --we-duration: 280ms;
  --we-duration-slow: 480ms;

  /* Layout shell */
  --we-sidebar-w: 17.5rem;
  --we-sidebar-collapsed: 4.5rem;
  --we-topbar-h: 4rem;

  /* Sombras */
  --we-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --we-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28);
  --we-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --we-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --we-shadow-glow: 0 0 0 1px rgba(56, 189, 248, 0.08), 0 8px 32px rgba(14, 165, 233, 0.12);

  /* Z-index */
  --we-z-sidebar: 1040;
  --we-z-topbar: 1030;
  --we-z-overlay: 1050;
  --we-z-modal: 1060;
}

/* ——— Dark (default enterprise) ——— */
:root,
[data-we-theme="dark"] {
  color-scheme: dark;

  --we-bg-void: #06080f;
  --we-bg-base: #0a0e17;
  --we-bg-raised: #0f1420;
  --we-bg-surface: #141b2d;
  --we-bg-elevated: #1a2332;
  --we-bg-hover: #222d42;
  --we-bg-active: #2a3650;

  --we-glass: rgba(20, 27, 45, 0.72);
  --we-glass-border: rgba(148, 163, 184, 0.08);
  --we-glass-blur: 20px;

  --we-border: rgba(148, 163, 184, 0.1);
  --we-border-strong: rgba(56, 189, 248, 0.22);
  --we-border-focus: rgba(34, 211, 238, 0.55);

  --we-text: #f1f5f9;
  --we-text-secondary: #cbd5e1;
  --we-text-muted: #64748b;
  --we-text-inverse: #0a0e17;

  --we-primary: #38bdf8;
  --we-primary-hover: #7dd3fc;
  --we-primary-muted: rgba(56, 189, 248, 0.12);
  --we-accent: #22d3ee;
  --we-accent-muted: rgba(34, 211, 238, 0.1);

  --we-success: #34d399;
  --we-success-muted: rgba(52, 211, 153, 0.12);
  --we-warning: #fbbf24;
  --we-warning-muted: rgba(251, 191, 36, 0.12);
  --we-danger: #f87171;
  --we-danger-muted: rgba(248, 113, 113, 0.12);
  --we-info: #60a5fa;

  --we-gradient-brand: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 50%, #38bdf8 100%);
  --we-gradient-surface: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
  --we-gradient-mesh:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(14, 165, 233, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(34, 211, 238, 0.06), transparent 45%),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(56, 189, 248, 0.04), transparent 50%);

  --we-scrollbar: rgba(148, 163, 184, 0.2);
  --we-scrollbar-hover: rgba(56, 189, 248, 0.4);

  /* Bootstrap bridge */
  --bs-body-bg: var(--we-bg-base);
  --bs-body-color: var(--we-text);
  --bs-border-color: var(--we-border);
  --bs-primary: #0ea5e9;
  --bs-primary-rgb: 14, 165, 233;
  --bs-secondary-color: var(--we-text-muted);
  --bs-tertiary-bg: var(--we-bg-surface);
  --bs-emphasis-color: var(--we-text);
  --bs-link-color: var(--we-primary);
  --bs-link-hover-color: var(--we-primary-hover);
}

/* ——— Light enterprise ——— */
[data-we-theme="light"] {
  color-scheme: light;

  --we-bg-void: #e2e8f0;
  --we-bg-base: #f1f5f9;
  --we-bg-raised: #f8fafc;
  --we-bg-surface: #ffffff;
  --we-bg-elevated: #ffffff;
  --we-bg-hover: #f1f5f9;
  --we-bg-active: #e2e8f0;

  --we-glass: rgba(255, 255, 255, 0.85);
  --we-glass-border: rgba(15, 23, 42, 0.06);
  --we-glass-blur: 16px;

  --we-border: rgba(15, 23, 42, 0.08);
  --we-border-strong: rgba(14, 165, 233, 0.25);
  --we-border-focus: rgba(14, 165, 233, 0.5);

  --we-text: #0f172a;
  --we-text-secondary: #334155;
  --we-text-muted: #64748b;
  --we-text-inverse: #f8fafc;

  --we-primary: #0284c7;
  --we-primary-hover: #0369a1;
  --we-primary-muted: rgba(2, 132, 199, 0.1);
  --we-accent: #0891b2;
  --we-accent-muted: rgba(8, 145, 178, 0.08);

  --we-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --we-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
  --we-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  --we-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.1);
  --we-shadow-glow: 0 0 0 1px rgba(14, 165, 233, 0.1), 0 8px 24px rgba(14, 165, 233, 0.08);

  --we-gradient-mesh:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(14, 165, 233, 0.06), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(8, 145, 178, 0.04), transparent 45%);
}