:root {
  --background: hsl(0, 0%, 100%); /* #ffffff (blanco puro) */
  --foreground: hsl(237, 74%, 19%); /* #0d1156 (azul base oscuro) */
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222.2, 84%, 4.9%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222.2, 84%, 4.9%);
  --primary: oklch(72.632% 0.1901 144.734);
  --primary-foreground: hsl(
    210,
    40%,
    98%
  ); /* #f0f5fc (azul claro casi blanco) */
  --secondary: hsl(225, 50%, 95%); /* #f1f3fd */
  --secondary-foreground: hsl(225, 50%, 20%); /* #1a2268 */
  --muted: hsl(225, 30%, 97%); /* #f7f8fd (gris azulado claro) */
  --muted-foreground: hsl(225, 20%, 45%); /* #6a6f8c (gris azulado) */
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: hsl(0, 84%, 60%); /* #e74c3c (rojo vibrante) */
  --destructive-foreground: hsl(210, 40%, 98%);
  --warning: hsl(40, 100%, 50%);
  --warning-foreground: hsl(36, 100%, 36%);
  --border: hsl(225, 30%, 85%); /* #d5d9f0 */
  --ring: hsl(237, 74%, 19%); /* #2a4aff (azul brillante) */
  --input: hsl(214.3, 31.8%, 91.4%);
  --radius: 1rem;
  --chart-1: hsl(12, 76%, 61%);
  --chart-2: hsl(173, 58%, 39%);
  --chart-3: hsl(197, 37%, 24%);
  --chart-4: hsl(43, 74%, 66%);
  --chart-5: hsl(27, 87%, 67%);
  --sidebar: hsl(0, 0%, 98%);
  --sidebar-foreground: hsl(240, 5.3%, 26.1%);
  --sidebar-primary: hsl(240, 5.9%, 10%);
  --sidebar-primary-foreground: hsl(0, 0%, 98%);
  --sidebar-accent: hsl(240, 4.8%, 95.9%);
  --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
  --sidebar-border: hsl(220, 13%, 91%);
  --sidebar-ring: hsl(237, 74%, 19%);
}

.dark {
  --background: hsl(225, 50%, 8%); /* #080b33 (azul casi negro) */
  --foreground: hsl(210, 40%, 98%); /* #f0f5fc (blanco azulado) */
  --card: hsl(222.2, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222.2, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: oklch(72.632% 0.1901 144.734);
  --primary-foreground: hsl(225, 50%, 5%); /* #070a2b (azul muy oscuro) */
  --secondary: hsl(237, 74%, 19%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(225, 30%, 20%); /* #262d5c */
  --muted-foreground: hsl(225, 20%, 65%); /* #9da0c2 (gris azulado claro) */
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: hsl(0, 84%, 55%); /* #d62c1a (rojo oscuro) */
  --destructive-foreground: hsl(210, 40%, 98%);
  --warning: hsl(40, 100%, 50%);
  --warning-foreground: hsl(44, 100%, 70%);
  --input: hsl(217.2, 32.6%, 17.5%);
  --border: hsl(217.2, 32.6%, 17.5%);
  --ring: hsl(225, 70%, 60%); /* #4d6bff */
  --chart-1: hsl(220, 70%, 50%);
  --chart-2: hsl(160, 60%, 45%);
  --chart-3: hsl(30, 80%, 55%);
  --chart-4: hsl(280, 65%, 60%);
  --chart-5: hsl(340, 75%, 55%);
  --sidebar: hsl(222.2, 84%, 4.9%);
  --sidebar-foreground: hsl(2210, 40%, 98%);
  --sidebar-primary: hsl(210, 40%, 98%);
  --sidebar-primary-foreground: hsl(222.2, 47.4%, 11.2%);
  --sidebar-accent: hsl(217.2, 32.6%, 17.5%);
  --sidebar-accent-foreground: hsl(210, 40%, 98%);
  --sidebar-border: hsl(217.2, 32.6%, 17.5%);
  --sidebar-ring: hsl(212.7, 26.8%, 83.9%);
}