/* Loquendo Rifas — tokens. Tema Noche por defecto; añade data-theme="claro" en <html> para el tema Claro. */

@font-face { font-family: "Luckiest Guy"; src: url("fonts/LuckiestGuy-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: "Nunito"; src: url("fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "Nunito"; src: url("fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root, [data-theme="noche"] {
  --azul-noche: #001845;
  --amarillo: #FFD60A;
  --celeste: #00A6FB;
  --rosa: #FF0054;
  --blanco: #F7F7FF;
  --on-amarillo: #001845;
  --on-celeste: #001845;
  --fondo: #001845;
  --superficie: #0A2A63;
  --superficie-alta: #123A7E;
  --linea: #1F4790;
  --borde-control: #6E89C4;
  --borde-marca: #001845;
  --tinta: #F7F7FF;
  --tinta-tenue: #B8C4E0;
  --celeste-texto: #00A6FB;
  --rosa-texto: #FF6A95;
  --premio-texto: #FFD60A;
  --foco: #00A6FB;
  --sombra-letra: 4px 4px 0 #FF0054;
  --sombra-boton: 0 5px 0 #FF0054;
  --sombra-seleccion: 3px 3px 0 #FF0054;
  --sombra-tarjeta: 6px 6px 0 #000C24;
  --focus-ring: 0 0 0 3px #001845, 0 0 0 6px #00A6FB;
}

[data-theme="claro"] {
  --fondo: #F7F7FF;
  --superficie: #FFFFFF;
  --superficie-alta: #E6ECF8;
  --linea: #D3DBEC;
  --borde-control: #6B7895;
  --tinta: #001845;
  --tinta-tenue: #4A5878;
  --celeste-texto: #0069A8;
  --rosa-texto: #C70046;
  --premio-texto: #8A6A00;
  --foco: #0069A8;
  --sombra-tarjeta: 6px 6px 0 #001845;
  --focus-ring: 0 0 0 3px #F7F7FF, 0 0 0 6px #0069A8;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --trazo-fino: 3px;
  --trazo-grueso: 5px;
  --font-display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --font-sans: Nunito, "Segoe UI", system-ui, sans-serif;
}