/* assets/css/variables.css
   Design tokens del sistema, migrados visualmente desde contentosapp.html.
   Se conservan TODOS los nombres de variables originales (--color-primario, --bg-app, etc.)
   para no romper ningun otro archivo CSS/PHP que ya las use. Solo se ajustan valores
   y se agregan variables nuevas (aditivas) para el sidebar oscuro tipo ContentOS. */

:root {
  --color-primario: #4F46E5;
  --color-primario-hover: #4338CA;
  --color-secundario: #8B85FF;

  --color-exito: #10B981;
  --color-info: #3B82F6;
  --color-advertencia: #F59E0B;
  --color-peligro: #E11D48;

  --bg-app: #F5F6FA;
  --bg-superficie: #FFFFFF;
  --bg-superficie-alt: #FBFBFD;
  --bg-hover: #F1F2F8;

  --texto-principal: #14161F;
  --texto-secundario: #6B7080;
  --texto-tenue: #9CA0AF;

  --borde: #E7E8EF;
  --borde-fuerte: #D3D5E0;
  --borde-suave: #EFF0F5;

  --sombra-xs: 0 1px 2px rgba(20, 22, 31, .04);
  --sombra-sm: 0 2px 8px rgba(20, 22, 31, .06);
  --sombra-md: 0 8px 24px rgba(20, 22, 31, .09);
  --sombra-lg: 0 18px 46px rgba(20, 22, 31, .16);

  --radio-sm: 10px;
  --radio-md: 14px;
  --radio-lg: 18px;

  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;

  --sidebar-ancho: 248px;
  --navbar-alto: 66px;

  /* Sidebar: siempre oscuro (igual en tema claro y oscuro), como en ContentOS */
  --sidebar-bg: #12141A;
  --sidebar-bg-hover: rgba(255, 255, 255, .06);
  --sidebar-text: #AEB2C0;
  --sidebar-text-active: #FFFFFF;
  --sidebar-activo-bg: rgba(109, 102, 255, .16);
  --sidebar-borde: rgba(255, 255, 255, .08);

  --transicion: 180ms ease;
  --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-tema="oscuro"] {
  --bg-app: #0D0F14;
  --bg-superficie: #161922;
  --bg-superficie-alt: #1B1F29;
  --bg-hover: #20232D;

  --texto-principal: #EEF0F5;
  --texto-secundario: #9BA0B0;
  --texto-tenue: #6C7183;

  --borde: #262A36;
  --borde-fuerte: #333747;
  --borde-suave: #20232D;

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --sombra-md: 0 10px 28px rgba(0, 0, 0, .45);
  --sombra-lg: 0 22px 50px rgba(0, 0, 0, .55);

  --color-primario: #6D66FF;
  --color-primario-hover: #8B85FF;

  --sidebar-bg: #0A0B10;
}