/* =============================================================
   POCHOLA — Tokens de diseño (fuente única de verdad)
   =============================================================
   Extraído tal cual de index.html (variables :root + tema claro),
   sin modificar ningún valor. Antes vivía duplicado en index.html
   y en pochola_nesting.html; ahora ambas apps —y el Workspace—
   importan este único archivo.

   Lo que NO va acá: overrides de variables ligados a un breakpoint
   de layout específico (--sidebar-w, --header-h en @media), porque
   son ajustes de layout de una app puntual, no tokens de marca.
   Esos se quedan en el CSS de cada app.
   ============================================================= */

:root {
  /* Le dice al navegador que los controles nativos (select, checkbox,
     scrollbar, etc.) deben pintarse con la paleta oscura del sistema —
     sin esto, el popup nativo de un <select> sale con fondo blanco fijo
     y el texto (heredado de --text-1, claro) queda ilegible encima. */
  color-scheme: dark;

  /* Paleta principal */
  --bg-0: #07090f;
  --bg-1: #0d1220;
  --bg-2: #141a2e;
  --bg-3: #1c2440;
  --overlay-rgb: 255, 255, 255;
  --surface: rgba(22, 28, 48, 0.65);
  --surface-hover: rgba(30, 38, 64, 0.85);
  /* Versión OPACA de --surface, para lo que flota por encima del contenido
     (toasts, menús desplegables, barras sobre el lienzo). Agregado el
     16/08/2026 junto con la baja de `backdrop-filter`: hasta entonces esos
     elementos se apoyaban en el desenfoque para tapar lo que tenían atrás.
     Sin desenfoque, un fondo al 65% dejaría leer el diseño o el texto de
     abajo. Este valor es el mismo color que se veía antes (--surface
     compuesto sobre --bg-0), solo que ya resuelto y sin transparencia.
     Los paneles y la barra de estadísticas NO usan esto: se apoyan sobre
     el fondo plano de la página, así que con --surface se ven igual que
     siempre. */
  --surface-solid: #111524;
  --border: rgba(var(--overlay-rgb), 0.08);
  --border-strong: rgba(var(--overlay-rgb), 0.14);

  /* Texto */
  --text-0: #ffffff;
  --text-1: #e4e8f1;
  --text-2: #9aa3b8;
  --text-3: #838ca0;

  /* Acentos Pochola (naranja/ámbar cálido) */
  --accent: #ff8a3d;
  --accent-2: #ffb347;
  --accent-glow: rgba(255, 138, 61, 0.35);
  --success: #3ddc97;
  --danger: #ff5470;
  --info: #4dabf7;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px var(--accent-glow);

  /* Geometría */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Transiciones */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 480ms;

  /* Layout base (cada app puede sobreescribir en su propio responsive) */
  --header-h: 72px;
  --sidebar-w: 300px;
}

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

  --bg-0: #f3f4f8;
  --bg-1: #e9ebf2;
  --bg-2: #dfe2ec;
  --bg-3: #d2d6e4;
  --overlay-rgb: 10, 14, 26;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-hover: rgba(255, 255, 255, 0.95);
  --surface-solid: #fcfcfe;
  --border: rgba(10, 14, 26, 0.10);
  --border-strong: rgba(10, 14, 26, 0.18);

  --text-0: #0a0e1a;
  --text-1: #1c2333;
  --text-2: #5b6478;
  --text-3: #838cA0;

  --accent-glow: rgba(255, 138, 61, 0.25);

  --shadow-sm: 0 2px 8px rgba(20, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 24, 40, 0.10);
  --shadow-lg: 0 20px 60px rgba(20, 24, 40, 0.14);
}

/* Accesibilidad: foco visible para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}