/* ==========================================================================
   Piscinas Fiji — Tokens de Color y Sistema de Diseño (Kit de Marca v1.0)
   Fuente de verdad: Guía de Marca Piscinas Fiji · Colonia Valdense, Uruguay
   ========================================================================== */

:root {
  /* Paleta Oficial Piscinas Fiji */
  --color-azul-fiji: #0693FF;        /* Azul Piscina (Principal del imagotipo y acentos) */
  --color-azul-piscina: #0693FF;     /* Alias canónico */
  --color-azul-fiji-oscuro: #0065B7; /* Azul Profundo (Base de letras y links) */
  --color-azul-profundo: #0065B7;    /* Alias canónico */
  --color-azul-noche: #06213A;       /* Azul Noche (Fondos oscuros y texto principal) */
  --color-grafito: #2B3A47;          /* Grafito (Texto de cuerpo web, contraste 11.7:1 sobre blanco) */
  --color-espuma: #EAF5FF;           /* Espuma (Fondo claro de secciones y tarjetas) */
  --color-blanco: #FFFFFF;           /* Blanco base */
  --color-sol: #F5A524;              /* Sol / Acento para botones de acción (8.0:1 con Azul Noche) */

  --color-abismo: #06213A;           /* Alias canónico Azul Noche / Abismo */
  --color-texto-principal: #06213A;  /* Texto de títulos y elementos de alto contraste */
  --color-texto-secundario: #5A6E82; /* Subtítulos, metadatos y descripciones */
  --color-borde-suave: rgba(6, 33, 58, 0.12); /* Borde neutro suave */

  /* Bordes y Separadores Neutros */
  --color-borde: rgba(6, 33, 58, 0.12);
  --color-borde-fiji: rgba(6, 147, 255, 0.35);

  /* Sombras y Elevaciones */
  --shadow-subtle: 0 4px 14px rgba(6, 33, 58, 0.06);
  --shadow-elevated: 0 10px 28px rgba(6, 33, 58, 0.12);
  --shadow-hover: 0 12px 32px rgba(6, 33, 58, 0.16);

  /* Animaciones y Dimensiones */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.35s ease;
  --header-height: 80px;
}

/* ==========================================================================
   Clases de Utilidad de Fondo (Armonizadas con Paleta Fiji)
   ========================================================================== */

.fondo-abismo,
.fondo-noche {
  background-color: var(--color-azul-noche);
  color: var(--color-blanco);
}

.fondo-bruma,
.fondo-espuma {
  background-color: var(--color-espuma);
  color: var(--color-grafito);
}

.fondo-marfil {
  background-color: var(--color-espuma);
  color: var(--color-grafito);
}

.fondo-piedra {
  background-color: var(--color-espuma);
  color: var(--color-grafito);
}

.fondo-blanco {
  background-color: var(--color-blanco);
  color: var(--color-grafito);
}