/* ============================================================
   MKTelinks — Design Tokens  (tema claro estilo WispHub)
   ============================================================ */
:root {
  /* Fondos */
  --bg: #F1F4F7;
  --sidebar: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --surface-3: #EBEFF3;

  /* Bordes */
  --border: #E2E7ED;
  --border-strong: #CBD4DE;

  /* Lo que flota por encima de la página (menús, avisos) y lo que es campo a rellenar */
  --raised: #FFFFFF;
  --field: #FFFFFF;

  /* Barra superior: traslúcida para que se vea el desenfoque al hacer scroll */
  --topbar-bg: rgba(255, 255, 255, 0.9);

  /* Texto */
  --text: #16202B;
  --text-2: #566270;
  --text-3: #8B97A5;

  /* Acento primario (verde) */
  --accent: #0B8F5E;
  --accent-strong: #0A7A50;
  --accent-soft: rgba(11, 143, 94, 0.10);
  --accent-ring: rgba(11, 143, 94, 0.18);

  /* Semánticos */
  --success: #067647;
  --success-soft: rgba(22, 163, 74, 0.12);
  --warning: #B45309;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --warning-fuerte: #C2410C;
  --danger: #C22A2E;
  --danger-soft: rgba(220, 38, 38, 0.10);
  --purple: #6D4AC0;
  --purple-soft: rgba(109, 74, 192, 0.10);
  --info: #1D5FBF;
  --info-soft: rgba(29, 95, 191, 0.10);

  /* Huebles para los iconos de color (teselas del menú y contadores) */
  --teal: #0E7C86;
  --teal-soft: rgba(14, 124, 134, 0.11);
  --indigo: #4C52C4;
  --indigo-soft: rgba(76, 82, 196, 0.10);
  --cyan: #1078B4;
  --cyan-soft: rgba(16, 120, 180, 0.10);
  --pink: #C2417E;
  --pink-soft: rgba(194, 65, 126, 0.10);

  /* Hover / selección sobre fondo claro */
  --hover: rgba(22, 32, 43, 0.045);
  --hover-strong: rgba(22, 32, 43, 0.08);

  /* Barra de scroll */
  --scroll: #C8D1DB;
  --scroll-hover: #AAB7C4;

  /* Tipografía */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* Radios (más cerrados, estilo panel de gestión) */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Sombras suaves */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 34px rgba(16, 24, 40, 0.16);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 54px;

  /* Transiciones */
  --t-fast: 120ms ease;
  --t-med: 200ms ease;

  color-scheme: light;
}

/* ============================================================
   Tema oscuro — se activa con <html data-theme="oscuro">
   Solo se cambian los colores; radios, sombras y tipografía
   siguen valiendo, así que cualquier pantalla nueva hereda.
   Verdes/rojos son más claros que en el tema claro para que
   se lean sobre el fondo negro (contraste mínimo 4.5:1).
   ============================================================ */
[data-theme="oscuro"] {
  /* Fondos */
  --bg: #0E1116;
  --sidebar: #12161D;
  --surface: #171C24;
  --surface-2: #1D232C;
  --surface-3: #262E39;

  /* Bordes */
  --border: #28313D;
  --border-strong: #3B4857;

  /* Los menús van más levantados que la tarjeta; los campos van hundidos */
  --raised: #222B36;
  --field: #11161D;

  --topbar-bg: rgba(18, 22, 29, 0.88);

  /* Texto */
  --text: #E7ECF3;
  --text-2: #A8B4C2;
  --text-3: #7C8896;

  /* Acento primario (verde) */
  --accent: #16B57E;
  --accent-strong: #0F9D6C;
  --accent-soft: rgba(22, 181, 126, 0.16);
  --accent-ring: rgba(22, 181, 126, 0.26);

  /* Semánticos */
  --success: #3FD493;
  --success-soft: rgba(63, 212, 147, 0.16);
  --warning: #F0B23C;
  --warning-soft: rgba(240, 178, 60, 0.18);
  --warning-fuerte: #FB923C;
  --danger: #FF6B6E;
  --danger-soft: rgba(255, 107, 110, 0.16);
  --purple: #B195FF;
  --purple-soft: rgba(177, 149, 255, 0.16);
  --info: #6FB0F5;
  --info-soft: rgba(111, 176, 245, 0.16);

  /* Huebles de los iconos de color */
  --teal: #3FC3D1;
  --teal-soft: rgba(63, 195, 209, 0.16);
  --indigo: #969CF2;
  --indigo-soft: rgba(150, 156, 242, 0.16);
  --cyan: #4FB4EC;
  --cyan-soft: rgba(79, 180, 236, 0.16);
  --pink: #F58AB8;
  --pink-soft: rgba(245, 138, 184, 0.16);

  /* Hover / selección: ahora hace falta blanco, no negro */
  --hover: rgba(231, 236, 243, 0.06);
  --hover-strong: rgba(231, 236, 243, 0.11);

  /* Barra de scroll */
  --scroll: #3A4655;
  --scroll-hover: #4E5C6D;

  /* Sombras: sobre negro hay que subirlas de opacidad */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}