/* ============================================================
   Below Deck Villa — Design Tokens
   "The Unhurried Coast" · vanilla CSS custom properties
   Day palette is the default; the scroll engine animates the
   --phase-* group from dawn → day → night (see § PHASES).
   ============================================================ */

:root {
  /* ---------- 1. BRAND PALETTE (locked) ---------- */
  --navy:        #1C3B4D;   /* principal: botones, texto, estructura */
  --navy-deep:   #132A38;   /* fondos oscuros, gradientes */
  --turq:        #2BA6B0;   /* acentos, links, checks */
  --turq-deep:   #1B7B83;   /* hover turquesa */
  --sand:        #EFE6D3;   /* fondo general */
  --sand-soft:   #F6F0E4;   /* fondo de cards */
  --white:       #FCFAF5;   /* blanco cálido */
  --coral:       #E08763;   /* CTAs, botones de acción */
  --coral-deep:  #C56848;   /* hover coral */
  --ink:         #22303A;   /* texto principal */
  --muted:       #6B7A82;   /* texto secundario */

  /* ---------- 2. NIGHT EXTENSION (scroll end) ---------- */
  --night-bg:      #0E1A22;  /* fondo nocturno, más profundo que navy-deep */
  --deep:          #101C28;  /* hero bottom + book-direct band */
  --night-surface: #16252F;  /* cards en modo noche */
  --night-text:    #EDE7D8;  /* texto cálido sobre noche (eco de la arena) */
  --night-muted:   #8A98A0;  /* secundario en noche */
  --amber-glow:    #E8A95C;  /* el coral "calentado": luz de lámpara nocturna */
  --amber-deep:    #C98A45;  /* hover ámbar */

  /* ---------- 3. SEMANTIC TOKENS (use THESE in components) ---------- */
  --bg:            var(--sand);
  --surface:       var(--sand-soft);
  --surface-raised:var(--white);
  --surface-dark:  var(--navy);

  --text:          var(--ink);
  --text-muted:    var(--muted);
  --text-on-dark:  var(--sand-soft);
  --text-on-cta:   var(--navy-deep);   /* navy-deep sobre coral: ~5.6:1, pasa WCAG AA */

  --accent:        var(--turq);
  --accent-hover:  var(--turq-deep);
  --link:          var(--turq-deep);

  --cta:           var(--coral);
  --cta-hover:     var(--coral-deep);

  --border:        rgba(28, 59, 77, 0.14);   /* navy @ 14% */
  --border-strong: rgba(28, 59, 77, 0.28);
  --ring:          rgba(43, 166, 176, 0.45);  /* foco: turquesa */

  /* ---------- 4. TYPOGRAPHY ---------- */
  /* Free look-alikes of Villa Embrace's pairing: Fraunces ≈ Canela, Hanken Grotesk ≈ TT Firs Neue */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;   /* solo titulares display grandes */

  /* fluid type scale (clamp: min, vw, max) — base 16px, ratio ~1.25 */
  --text-eyebrow: 0.78rem;                              /* mayúscula + tracking */
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --text-2xl:     clamp(1.7rem, 1.3rem + 1.9vw, 2.5rem);
  --text-3xl:     clamp(2.2rem, 1.5rem + 3.2vw, 3.75rem);
  --text-hero:    clamp(2.8rem, 1.6rem + 6vw, 6rem);    /* titular firma */

  --leading-tight: 1.05;   /* titulares display */
  --leading-snug:  1.25;
  --leading-body:  1.65;   /* lectura serena */

  --tracking-eyebrow: 0.18em;
  --tracking-tight:  -0.02em;  /* display grande respira mejor ceñido */
  --tracking-normal:  0;

  /* ---------- 5. SPACING (rem rhythm) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;   /* aire generoso entre secciones (lujo = espacio) */

  /* ---------- 6. LAYOUT ---------- */
  --container:      1200px;
  --container-text: 680px;   /* ancho de lectura */
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---------- 7. RADII ---------- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- 8. SHADOWS (suaves; el lujo no grita) ---------- */
  --shadow-sm: 0 1px 2px rgba(19, 42, 56, 0.06);
  --shadow:    0 8px 24px rgba(19, 42, 56, 0.10);
  --shadow-lg: 0 24px 60px rgba(19, 42, 56, 0.16);

  /* ---------- 9. MOTION ---------- */
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  600ms;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* salida suave */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- 10. PHASES (driven by the scroll engine) ----------
     The day-cycle background. JS (or scroll-timeline) interpolates
     these on scroll: dawn → day → dusk → night. Components read
     --phase-bg / --phase-fg so the whole page mutates together. */
  --phase-bg:    var(--sand);        /* fondo del lienzo del scroll   */
  --phase-fg:    var(--ink);         /* texto sobre el lienzo         */
  --phase-accent:var(--coral);       /* CTA/acento: coral → ámbar     */
}

/* Phase presets — the scroll engine sets data-phase on <html> or
   animates between these via custom-property transitions. */
:root[data-phase="dawn"]  { --phase-bg: #EFE6D3; --phase-fg: #22303A; --phase-accent: #E08763; }
:root[data-phase="day"]   { --phase-bg: #DCE7EA; --phase-fg: #16252F; --phase-accent: #2BA6B0; }
:root[data-phase="dusk"]  { --phase-bg: #3A3A52; --phase-fg: #F1E7D6; --phase-accent: #E08763; }
:root[data-phase="night"] { --phase-bg: #0E1A22; --phase-fg: #EDE7D8; --phase-accent: #E8A95C; }

/* Smooth interpolation when phases switch (needs @property for true
   color tweening; falls back to a crossfade otherwise). */
@property --phase-bg     { syntax: "<color>"; inherits: true; initial-value: #EFE6D3; }
@property --phase-fg     { syntax: "<color>"; inherits: true; initial-value: #22303A; }
@property --phase-accent { syntax: "<color>"; inherits: true; initial-value: #E08763; }

:root {
  transition: --phase-bg var(--dur-slow) linear,
              --phase-fg var(--dur-slow) linear,
              --phase-accent var(--dur-slow) linear;
}

/* ---------- 11. STATIC DARK SECTIONS (footer, night cards) ----------
   For blocks that are always dark regardless of scroll phase. */
[data-theme="night"] {
  --bg:            var(--night-bg);
  --surface:       var(--night-surface);
  --surface-raised:#1D3340;
  --text:          var(--night-text);
  --text-muted:    var(--night-muted);
  --accent:        var(--turq);
  --accent-hover:  #43C0CA;
  --link:          #5FC9D2;
  --cta:           var(--amber-glow);
  --cta-hover:     var(--amber-deep);
  --text-on-cta:   var(--navy-deep);
  --border:        rgba(237, 231, 216, 0.12);
  --border-strong: rgba(237, 231, 216, 0.24);
}

/* ---------- 12. ACCESSIBILITY FLOOR ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  html:not(.motion-forced) *:not(.reveal):not(.rt-w > span):not(.ri img), html:not(.motion-forced) *::before, html:not(.motion-forced) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}