:root {
  color-scheme: light;
  --color-background: #f5f7fb;
  --color-background-elevated: #edf3f9;
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-surface-tertiary: #eef4fb;
  --color-sidebar: #0b1f3a;
  --color-sidebar-muted: #8fa7c4;
  --color-sidebar-border: rgba(255, 255, 255, 0.1);
  --color-primary: #143d73;
  --color-primary-hover: #0f315f;
  --color-primary-soft: #e6f0fb;
  --color-accent: #226fba;
  --color-accent-soft: #dcecff;
  --color-border: #d7e1ee;
  --color-border-strong: #b9c8da;
  --color-text: #10223a;
  --color-text-secondary: #52677f;
  --color-text-muted: #71839a;
  --color-text-inverse: #f8fbff;
  --color-success: #1f7a4d;
  --color-success-soft: #e5f5ec;
  --color-warning: #9a6700;
  --color-warning-soft: #fff4d6;
  --color-danger: #b42318;
  --color-danger-soft: #fde8e5;
  --color-info: #1d5f93;
  --color-info-soft: #e4f2fb;
  --shadow-sm: 0 1px 2px rgba(16, 34, 58, 0.08);
  --shadow-md: 0 12px 32px rgba(16, 34, 58, 0.12);
  --shadow-lg: 0 24px 70px rgba(16, 34, 58, 0.18);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --space-page: clamp(1rem, 2.5vw, 2rem);
  --ancho-panel-login: 430px;
  --fuente-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibilidad con clases existentes durante la migracion visual. */
  --color-fondo: var(--color-background);
  --color-superficie: var(--color-surface);
  --color-superficie-suave: var(--color-surface-tertiary);
  --color-texto: var(--color-text);
  --color-texto-principal: var(--color-text);
  --color-texto-secundario: var(--color-text-secondary);
  --color-borde: var(--color-border);
  --color-primario: var(--color-primary);
  --color-primario-2: var(--color-accent);
  --color-primario-3: #3b82d6;
  --color-acento: #f4c542;
  --color-error: var(--color-danger);
  --color-exito: var(--color-success);
  --sombra-panel: var(--shadow-md);
  --sombra-boton: 0 10px 24px rgba(34, 111, 186, 0.22);
  --radio-sm: var(--radius-sm);
  --radio-md: var(--radius-md);
  --radio-lg: var(--radius-lg);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #08121f;
  --color-background-elevated: #0c192a;
  --color-surface: #111f31;
  --color-surface-secondary: #0d1a2b;
  --color-surface-tertiary: #162842;
  --color-sidebar: #07101d;
  --color-sidebar-muted: #8aa2bd;
  --color-sidebar-border: rgba(255, 255, 255, 0.09);
  --color-primary: #8ab8ed;
  --color-primary-hover: #b6d7ff;
  --color-primary-soft: #122a45;
  --color-accent: #6aa8ec;
  --color-accent-soft: #14375b;
  --color-border: #223955;
  --color-border-strong: #36506e;
  --color-text: #eef5fc;
  --color-text-secondary: #b4c4d6;
  --color-text-muted: #8da0b5;
  --color-text-inverse: #07101d;
  --color-success: #69d69a;
  --color-success-soft: #143326;
  --color-warning: #ffd166;
  --color-warning-soft: #3b2d11;
  --color-danger: #ff9188;
  --color-danger-soft: #3b1f20;
  --color-info: #8ccfff;
  --color-info-soft: #12324b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.42);
  --sombra-boton: 0 10px 24px rgba(106, 168, 236, 0.18);
}