/* Contrada UGC · tokens. Copia fiel de soshally-sistemas-visuales/sistemas/restauracion/contrada/tokens.css
   con el par acento instanciado para esta creator (rojo carmín + rosa pastel, del pool cerrado del sistema).
   Fuentes: Oswald (display) + Lora (cuerpo). Ambas Google Fonts (OFL).
   Solo se cargan los pesos que el CSS usa de verdad — Oswald 400/700 y Lora 400:
   <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Lora:wght@400&display=swap" rel="stylesheet"> */

:root {
  /* Color base (siempre presente) */
  --bg:        #FEF8DD;   /* crema cálido (fondo del sitio) */
  --ink:       #004632;   /* verde bosque profundo (texto y titulares principales) */
  --salvia:    #BDD0A0;   /* verde salvia (marcas de agua, texto sobre ink, decoración) */

  /* Acento de ESTA creator. Elegido del pool cerrado — no se inventan colores nuevos. */
  --accent-bg:   #B42318;   /* rojo carmín */
  --accent-text: #F9CEE1;   /* rosa pastel */

  /* Pool disponible (referencia; se usa en las tarjetas de tarifas):
     Carmín:   bg #B42318 · text #F9CEE1
     Salvia:   bg #BDD0A0 · text #C7361C
     Helado:   bg #D3EDEF · text #314B98
     Bosque:   bg #004632 · text #BDD0A0
     Cobalto:  bg #314B98 · text #FEF8DD
     Verde/rosa: bg #004632 · text #F9CEE1
     Naranja:  bg #FF6A00 · text #FEF8DD
     Mostaza:  bg #FFD64D · text #004632 */

  /* Tipografía */
  --f-display: 'Oswald', 'Impact', sans-serif;         /* wordmark, tickers, titulares, botones, big-links */
  /* Cuerpo: Lora en lugar de la Merriweather del sistema original (decisión de
     Ana). Mismo papel —serif editorial— pero con más contraste y trazo más fino:
     a cuerpos pequeños respira mejor que la Merriweather, que es muy ancha.
     También OFL. Ojo: la definicion.md de Contrada marca el par Oswald 700 +
     Merriweather 300 como parte de su identidad, así que esta piel se desvía ahí
     a propósito. */
  --f-text:    'Lora', Georgia, serif;                 /* cuerpo, small-links no uppercase */
  --fs-body:   1rem;
  --lh-body:   1.5;

  /* Padding tokens (escala 1, 2, 3, 4, 5, 6, 9) */
  --p-1: 1rem;
  --p-2: 2rem;
  --p-3: 3rem;
  --p-4: 4rem;
  --p-5: 5rem;
  --p-6: 6rem;
  --p-9: 9rem;

  /* Layout */
  --pad-x:       var(--p-3);
  --radius-pill: 4px;

  /* Motion */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --dur-appear:      0.6s;
  --appear-y:        30px;
  --dur-hover:       0.3s;
  --dur-marquee:     40s;
}

/* Escala tipográfica fluida (el sistema usa html {font-size: 1vw} en desktop) */
@media screen and (min-width: 992px) {
  html { font-size: calc(0rem + 1vw); }
}
@media screen and (max-width: 991px) {
  html { font-size: 1rem; }
}

/* Appear global: fade + subida sutil al entrar en viewport */
@keyframes appear-in { from { opacity: 0; transform: translateY(var(--appear-y)); } to { opacity: 1; transform: none; } }
.has-js .appear { opacity: 0; transform: translateY(var(--appear-y)); }
.appear.in { animation: appear-in var(--dur-appear) var(--ease) forwards; }

/* Marca de agua (wordmark, palabras gigantes al fondo): fade-in al scroll */
.has-js .watermark { opacity: 0; }
.watermark.in { animation: watermark-in var(--dur-appear) var(--ease) forwards; }
@keyframes watermark-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .has-js .appear, .has-js .watermark, .appear, .watermark {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}