/* ============================================================
   Design Tokens — InfoSec Demo Lab
   Override de DaisyUI + tokens del design system (OKLCh)

   ESTRATEGIA DE PRECEDENCIA
   - DaisyUI define --b1, --p, etc. en  [data-theme="..."]     -> (0,1,0)
   - Aquí los overrideamos en          :root[data-theme="..."] -> (0,2,0)
     Mayor especificidad => gana SIEMPRE, sin depender del orden
     de carga ni del <style> que Tailwind CDN inyecta al final
     del <head> (que se regenera en caliente via MutationObserver).
   - !important se mantiene como cinturón de seguridad.
   ============================================================ */

/* ============================================================
   Design system tokens — disponibles para uso directo
   ============================================================ */
:root {
  --ds-bg:      oklch(98% 0.004 240);
  --ds-surface: oklch(100% 0 0);
  --ds-fg:      oklch(20% 0.02 240);
  --ds-muted:   oklch(50% 0.018 240);
  --ds-border:  oklch(90% 0.006 240);

  --ds-accent:        oklch(56% 0.12 170);
  --ds-accent-hover:  oklch(50% 0.13 170);
  --ds-accent-soft:   oklch(56% 0.12 170 / 0.12);
  --ds-secondary:     oklch(46% 0.15 260);
  --ds-secondary-soft: oklch(46% 0.15 260 / 0.10);

  --ds-success:  oklch(62% 0.18 145);
  --ds-warning:  oklch(72% 0.16 80);
  --ds-error:    oklch(52% 0.20 25);
  --ds-info:     oklch(58% 0.12 240);

  --ds-shell:    oklch(18% 0.02 250);
  --ds-shell-fg: oklch(92% 0.004 240);

  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-xl: 28px;
  --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
  --ds-shadow-md: 0 4px 16px oklch(0% 0 0 / 0.07);
  --ds-shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.10);
  --ds-shadow-xl: 0 20px 48px oklch(0% 0 0 / 0.14);

  --ds-ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   DaisyUI theme overrides
   Selector :root[data-theme="..."] (0,2,0) supera al
   [data-theme="..."] (0,1,0) de DaisyUI y a las utilidades
   de Tailwind (0,1,0), sin depender del orden de cascada.
   ============================================================ */

/* --- LIGHT THEME --- */
/* DaisyUI usa oklch(var(--b2)/1) — los valores deben ir SIN wrapper oklch() */
:root[data-theme="light"] {
  --b1: 98% 0.004 240 !important;
  --b2: 96% 0.005 240 !important;
  --b3: 93% 0.006 240 !important;
  --bc: 20% 0.02 240 !important;

  --p: 56% 0.12 170 !important;
  --pc: 100% 0 0 !important;

  --s: 46% 0.15 260 !important;
  --sc: 100% 0 0 !important;

  --a: 62% 0.18 145 !important;
  --ac: 100% 0 0 !important;

  --n: 50% 0.018 240 !important;
  --nc: 96% 0.004 240 !important;

  --su: 62% 0.18 145 !important;
  --suc: 100% 0 0 !important;

  --wa: 72% 0.16 80 !important;
  --wac: 25% 0.08 80 !important;

  --er: 52% 0.20 25 !important;
  --erc: 100% 0 0 !important;

  --in: 58% 0.12 240 !important;
  --inc: 100% 0 0 !important;
}

/* --- DARK THEME --- */
:root[data-theme="dark"] {
  --b1: 16% 0.01 250 !important;
  --b2: 20% 0.011 250 !important;
  --b3: 24% 0.012 250 !important;
  --bc: 92% 0.004 240 !important;

  --p: 68% 0.12 170 !important;
  --pc: 16% 0.01 250 !important;

  --s: 62% 0.14 260 !important;
  --sc: 16% 0.01 250 !important;

  --a: 68% 0.12 170 !important;
  --ac: 16% 0.01 250 !important;

  --n: 62% 0.015 240 !important;
  --nc: 16% 0.01 250 !important;

  --su: 68% 0.16 145 !important;
  --suc: 16% 0.01 250 !important;

  --wa: 78% 0.14 80 !important;
  --wac: 25% 0.08 80 !important;

  --er: 60% 0.20 25 !important;
  --erc: 100% 0 0 !important;

  --in: 65% 0.12 240 !important;
  --inc: 100% 0 0 !important;
}

/* ============================================================
   Component refinements
   ============================================================ */

/* Navbar — blur + transparencia */
.navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--ds-ease), box-shadow var(--ds-ease);
}

:root[data-theme="light"] .navbar {
  background: oklch(100% 0 0 / 0.85) !important;
}

:root[data-theme="dark"] .navbar {
  background: oklch(18% 0.01 250 / 0.85) !important;
}

/* Sidebar */
.drawer-side aside {
  transition: background var(--ds-ease);
}

:root[data-theme="light"] .drawer-side aside {
  background: oklch(98% 0.004 240) !important;
}

:root[data-theme="dark"] .drawer-side aside {
  background: oklch(18% 0.02 250) !important;
}

/* Cards — hover */
.card {
  transition: box-shadow var(--ds-ease), transform var(--ds-ease);
}

.card:hover {
  box-shadow: var(--ds-shadow-md);
}

/* Buttons — elevación */
.btn {
  transition: all var(--ds-ease);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

/* Badges */
.badge {
  border-radius: var(--ds-radius-full) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Alerts */
.alert {
  border-radius: var(--ds-radius-md) !important;
  transition: all var(--ds-ease);
}

/* Tables — hover */
.table tbody tr:hover {
  background: oklch(56% 0.12 170 / 0.06);
}

:root[data-theme="dark"] .table tbody tr:hover {
  background: oklch(68% 0.12 170 / 0.08);
}

/* Progress */
.progress {
  border-radius: var(--ds-radius-full) !important;
  overflow: hidden;
}

/* Menu — hover */
.menu li a {
  transition: all var(--ds-ease);
  border-radius: var(--ds-radius-sm);
}

.menu li a:hover {
  background: oklch(56% 0.12 170 / 0.08);
}

:root[data-theme="dark"] .menu li a:hover {
  background: oklch(68% 0.12 170 / 0.10);
}

/* Toast animation */
.toast .alert {
  animation: slideIn 0.3s var(--ds-ease);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Focus visible */
:focus-visible {
  outline: 3px solid oklch(56% 0.12 170 / 0.5) !important;
  outline-offset: 2px;
}

:root[data-theme="dark"] :focus-visible {
  outline-color: oklch(68% 0.12 170 / 0.5) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(78% 0.01 240);
  border-radius: var(--ds-radius-full);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: oklch(35% 0.01 250);
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(65% 0.015 240);
}
