:root {
  /* Tema claro (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-black: #000000;
  --bg-light: #ffffff;
  --text-primary: #212529;
  --text-primary-dark: #ffffff;
  --text-secondary: #a5a5a5;
  --accent-color: #2828ff;
  --other-color: #fafafa;
  --check-color: white;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --gradient-1: #c2cbf7;
  --gradient-2: #e3efff;
  --font-family: "Clash Display", sans-serif;
  --font-albert: "Albert Sans", sans-serif;
  --title: clamp(2.5rem, 8vw, 6rem);
  --subtitle: clamp(2.5rem, 6vw, 4rem);
  --text: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-secondary: clamp(1rem, 1.5vw, 1.125rem);
  --text-22: clamp(1.125rem, 2vw, 1.375rem);
  --text-48: clamp(2rem, 5vw, 3rem);
  --dots: #e3e6f1;
}

[data-theme="dark"] {
  /* Tema oscuro */
  --bg-primary: #1a1a1a;
  --bg-secondary: #343a40;
  --bg-black: #ffffff;
  --bg-light: #ffffff;
  --text-primary: #f8f9fa;
  --text-primary-dark: #000000;
  --text-secondary: #a5a5a5;
  --accent-color: #2828ff;
  --other-color: #333333;
  --check-color: white;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --gradient-1: #c2cbf7;
  --gradient-2: #e3efff;
  --font-family: "Clash Display", sans-serif;
  --font-albert: "Albert Sans", sans-serif;
  --title: clamp(2.5rem, 8vw, 6rem);
  --subtitle: clamp(2.5rem, 6vw, 4rem);
  --text: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-secondary: clamp(1rem, 1.5vw, 1.125rem);
  --dots: #e3e6f115;
}