:root {
  /* ── Colores ── */
  --color-primary: #003F87;
  --color-primary-container: #0056B3;
  --color-secondary: #575F67;
  --color-surface: #F9F9FF;
  --color-surface-container: #FFFFFF;
  --color-outline: #D9D9E2;
  --color-success: #137333;
  --color-error: #B11A1A;
  --color-warning: #722B00;
  --color-neutral: #727784;

  /* Derivados funcionales */
  --color-primary-hover: #00306A;
  --color-primary-active: #002454;
  --color-secondary-hover: #414851;
  --color-danger-hover: #8B1515;
  --color-success-hover: #0E5A28;
  --color-overlay: rgba(0, 0, 0, 0.35);
  --color-shadow-light: rgba(0, 0, 0, 0.08);

  /* Auth layout gradients */
  --color-auth-gradient-start: rgba(7, 55, 99, 0.70);
  --color-auth-gradient-mid: rgba(11, 68, 120, 0.55);
  --color-auth-gradient-end: rgba(7, 42, 80, 0.65);

  /* Fondos semitransparentes */
  --color-on-primary: #FFFFFF;
  --color-on-error: #FFFFFF;
  --color-primary-hover-bg: rgba(0, 63, 135, 0.02);
  --color-primary-bg: rgba(0, 63, 135, 0.1);
  --color-primary-surface: rgba(0, 63, 135, 0.08);
  --color-primary-highlight: rgba(0, 63, 135, 0.04);
  --color-primary-highlight-border: rgba(0, 63, 135, 0.12);
  --color-primary-ring-md: rgba(0, 63, 135, 0.15);
  --color-error-bg: rgba(177, 26, 26, 0.1);
  --color-error-bg-hover: rgba(177, 26, 26, 0.05);
  --color-error-surface: rgba(177, 26, 26, 0.08);
  --color-success-bg: rgba(19, 115, 51, 0.1);
  --color-success-surface: rgba(19, 115, 51, 0.08);
  --color-warning-bg: rgba(114, 43, 0, 0.1);
  --color-warning-surface: rgba(114, 43, 0, 0.08);
  --color-neutral-bg: rgba(114, 119, 132, 0.1);
  --color-neutral-surface: rgba(114, 119, 132, 0.08);

  /* ── Tipografía (Inter) ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-h1: 600 28px/1.3 var(--font-family);
  --font-h2: 600 22px/1.3 var(--font-family);
  --font-subtitle: 500 18px/1.4 var(--font-family);
  --font-body: 400 16px/1.5 var(--font-family);
  --font-label: 600 14px/1.4 var(--font-family);
  --font-caption: 400 13px/1.4 var(--font-family);
  --letter-spacing-h1: -0.02em;

  /* ── Espaciado ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radios ── */
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* ── Z-Index ── */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal: 1300;
  --z-tooltip: 1400;

  /* ── Layout ── */
  --sidebar-width: 270px;
  --sidebar-collapsed: 80px;
  --topbar-height: 60px;
}

/* ── Reset base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font: var(--font-body);
  color: var(--color-secondary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .ui-h1 {
  font: var(--font-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-primary);
}

h2, .ui-h2 {
  font: var(--font-h2);
  color: var(--color-primary);
}

.ui-subtitle {
  font: var(--font-subtitle);
  color: var(--color-secondary);
}

.ui-caption {
  font: var(--font-caption);
  color: var(--color-neutral);
}

.ui-label {
  font: var(--font-label);
  text-transform: uppercase;
  color: var(--color-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-container);
}

/* ── Focus visible para accesibilidad ── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}