:root {
  --fondo-base: #000000;
  --fondo-suave: #0a0a0a;
  --fondo-elevado: #111111;
  --texto-principal: #ffffff;
  --texto-secundario: #f1c40f;

  --acento-cyan: #00bcd4;
  --acento-magenta: #e91e63;
  --acento-amarillo: #f1c40f;
  --acento-verde: #4caf50;

  --corgi-marron: #b58953;
  --corgi-crema: #fdf5e6;

  --boton-fondo: #2196f3;
  --boton-hover-fondo: #1976d2;

  --borde-color: #333333;
  --borde-suave: #242424;

  --texto-atenuado: #9a9a9a;
  --sombra-base: 0 10px 40px rgba(0, 0, 0, 0.55);

  --gradiente-partida: #f1c40f;
  --gradiente-llegada: #00bcd4;

  --fuente-principal: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;

  --ancho-maximo: 1120px;
  --espaciado-seccion: 6.5rem;
  --radio-tarjeta: 14px;
  --radio-boton: 10px;

  --transicion: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --sombra-glow-amarillo: 0 0 0 1px rgba(241, 196, 15, 0.25), 0 8px 30px rgba(241, 196, 15, 0.12);
  --sombra-glow-cyan: 0 0 0 1px rgba(0, 188, 212, 0.25), 0 8px 30px rgba(0, 188, 212, 0.12);
}

html.theme-light {
  --fondo-base: #ffffff;
  --fondo-suave: #f6f6f4;
  --fondo-elevado: #eeeeec;
  --texto-principal: #111111;
  --texto-secundario: #8a6200;

  --acento-cyan: #007c91;
  --acento-magenta: #b8235a;
  --acento-amarillo: #c99700;
  --acento-verde: #2f9e44;

  --corgi-marron: #8a5a2b;
  --corgi-crema: #f3e9d8;

  --boton-fondo: #1565c0;
  --boton-hover-fondo: #0d47a1;

  --borde-color: #d9d9d4;
  --borde-suave: #e6e6e1;

  --texto-atenuado: #5c5c5c;
  --sombra-base: 0 10px 40px rgba(0, 0, 0, 0.08);

  --sombra-glow-amarillo: 0 0 0 1px rgba(201, 151, 0, 0.25), 0 8px 30px rgba(201, 151, 0, 0.10);
  --sombra-glow-cyan: 0 0 0 1px rgba(0, 147, 168, 0.22), 0 8px 30px rgba(0, 147, 168, 0.08);
}

@media (max-width: 768px) {
  :root {
    --espaciado-seccion: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}