/* ============================================================
   VARIABLES GLOBALES (tokens de diseno)

   Paleta tomada de las piezas de marca reales:

     - "Nosotros Pagina WEB" y "Programa de Referidos" son las
       piezas CORPORATIVAS: blanco, gris humo y negro. Sin color.
     - DOMANI y Pacific Soul son piezas de PROYECTO y cada una
       trae su propia paleta. Viven aqui para que exista una sola
       fuente de verdad, pero solo las usa el CSS de su proyecto.

   Regla: ningun otro archivo escribe colores "a mano".
   ============================================================ */

:root {
  /* --- Corporativo: blanco, gris y negro --- */
  --blanco: #ffffff;
  --humo: #efeeec;            /* bandas grises de las laminas */
  --negro: #1a1917;           /* cabecera, pie y botones solidos */
  --negro-claro: #33302c;

  --tinta: #1a1917;           /* texto principal */
  --tinta-suave: #56534e;
  --tinta-tenue: #8a857e;
  --linea: #dedbd6;
  --linea-fuerte: #c4bfb8;

  /* Texto sobre fondo oscuro. Antes estaba copiado a mano en cinco
     archivos; ahora sale de aqui. */
  --sobre-oscuro: #f2f0ed;
  --sobre-oscuro-suave: #c8c4bd;
  --sobre-oscuro-tenue: #9a948c;
  --linea-oscura: rgba(255, 255, 255, 0.16);
  --linea-oscura-fuerte: rgba(255, 255, 255, 0.5);

  /* Velos sobre fotografia: siempre el mismo negro, nunca uno suelto. */
  --velo-suave: rgba(16, 15, 14, 0.28);
  --velo-medio: rgba(16, 15, 14, 0.5);
  --velo-fuerte: rgba(16, 15, 14, 0.72);

  /* --- Paletas de proyecto (solo las usa css/proyectos/<slug>/) --- */
  --domani-crema: #fdf4ea;
  --domani-durazno: #f8d7bd;
  --domani-tinta: #2f3f5b;

  --pacific-mar: #0f3f57;
  --pacific-profundo: #082b3d;
  --pacific-hueso: #f2f0ec;
  --pacific-espuma: #cfe0e8;

  /* --- Roles semanticos --- */
  --color-marca: var(--negro);
  --color-texto: var(--tinta);
  --color-texto-suave: var(--tinta-suave);
  --color-texto-tenue: var(--tinta-tenue);
  --color-borde: var(--linea);
  --color-borde-fuerte: var(--linea-fuerte);
  --color-fondo: var(--blanco);
  --color-fondo-alterno: var(--humo);
  --color-acento: var(--negro);
  --color-acento-contraste: var(--blanco);

  /* --- Estados --- */
  --color-exito: #1f7a4d;
  --color-error: #b3261e;
  --color-whatsapp: #25d366;

  /* --- Tipografia ---
     Las laminas usan una serif de texto para titulares y una sans
     ligera para parrafos. Solo fuentes del sistema: cero peticiones
     externas y cero saltos de maquetacion al cargar. */
  --fuente-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente-texto: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida. El minimo de --texto-xxl esta calculado para que
     un titular de 20 caracteres quepa en 360 px. No subirlo.

     El minimo de --texto-xs es 0.875rem = 14 px: es el suelo de
     lectura que fija reglas-de-oro/03. Ningun texto baja de ahi. */
  --texto-xs: clamp(0.875rem, 0.86rem + 0.08vw, 0.92rem);
  --texto-sm: clamp(0.9rem, 0.87rem + 0.16vw, 0.98rem);
  --texto-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --texto-md: clamp(1.14rem, 1.05rem + 0.42vw, 1.34rem);
  --texto-lg: clamp(1.45rem, 1.2rem + 1.1vw, 2.15rem);
  --texto-xl: clamp(1.6rem, 1.15rem + 2vw, 3.2rem);
  --texto-xxl: clamp(1.75rem, 1.05rem + 3vw, 4.6rem);

  --interletrado-titulo: -0.015em;
  --interletrado-etiqueta: 0.22em;
  --interletrado-menu: 0.06em;

  /* --- Espaciado (escala de 4px) --- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4.5rem;
  --espacio-9: 7rem;

  /* --- Contenedores y medidas --- */
  --ancho-maximo: 1360px;
  --ancho-lectura: 62ch;
  --alto-cabecera: 88px;

  /* --- Bordes y sombras ---
     Las piezas corporativas usan esquinas casi rectas; las de
     proyecto, redondeadas generosas. */
  --radio-sm: 4px;
  --radio-md: 12px;
  --radio-lg: 22px;
  --radio-redondo: 999px;
  --sombra-suave: 0 2px 6px rgba(26, 25, 23, 0.05), 0 12px 32px rgba(26, 25, 23, 0.07);
  --sombra-media: 0 16px 48px rgba(26, 25, 23, 0.16);

  /* --- Movimiento --- */
  --transicion: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transicion-lenta: 800ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Capas --- */
  --capa-cabecera: 100;
  --capa-menu: 110;
  --capa-flotante: 150;
  --capa-aviso: 300;
}

/* Bloque en negativo: se aplica con la clase .tono-oscuro a cualquier
   seccion que deba verse sobre negro (bandas de foto, pie, avisos). */
.tono-oscuro {
  --color-texto: var(--sobre-oscuro);
  --color-texto-suave: var(--sobre-oscuro-suave);
  --color-texto-tenue: var(--sobre-oscuro-tenue);
  --color-borde: var(--linea-oscura);
  --color-borde-fuerte: var(--linea-oscura-fuerte);
  --color-fondo: var(--negro);
  --color-fondo-alterno: var(--negro-claro);
  --color-marca: var(--blanco);
  --color-acento: var(--blanco);
  --color-acento-contraste: var(--negro);

  color: var(--sobre-oscuro);
}