/* ==========================================================================
   CASA DE LA VIDA - GLOBAL DESIGN SYSTEM (globals.css)
   ==========================================================================

   1. ARCHITECTURE & TOKENS
   --------------------------------------------------------------------------
   This file acts as the Single Source of Truth for the Casa De La Vida UI.
   All modules in the `/modules` directory MUST reference these CSS variables
   rather than hardcoding values. This ensures system-wide consistency and
   allows for frictionless future theming.

   2. THE FLUID ENGINE (Typography & Spacing)
   --------------------------------------------------------------------------
   We use CSS `clamp(MIN, VAL, MAX)` to create a mathematically fluid typography
   and spacing scale. 
   - MIN: The absolute minimum size (mobile baseline).
   - VAL: The viewport-relative growth rate (vw).
   - MAX: The absolute maximum size (desktop cap).
   This eliminates the need for rigid breakpoints for typography, creating a
   seamless expansion from a 320px mobile screen up to ultra-wide displays.

   3. MOTION DNA & ACCESSIBILITY
   --------------------------------------------------------------------------
   Animations use a premium, subtle easing curve: `cubic-bezier(0.4, 0, 0.2, 1)`.
   A `prefers-reduced-motion` media query is included to respect system-level
   accessibility settings, stripping aggressive motion for users who require it.

   ========================================================================== */

:root {
  /* --- 1. BRAND PALETTE --- */
  --color-primary: #FFFFFF; 
  --color-secondary: #c19e71; 
  --color-accent: #473b75; 
  --color-accent-light: #473b7583; 
  --color-neutral-bg: #aebfb2; 
  --color-text-dark: #1A1A1A; 
  --color-text-light: #FFFFFF; 

  /* --- 2. TYPOGRAPHY --- */
  --font-family-heading: 'Playfair Display', serif;
  --font-family-body: 'Montserrat', sans-serif;
  --font-size-logo-text: clamp(0.9rem, 2vw, 1.4rem); 
  --font-weight-regular: 400;
  --letter-spacing-wide: 0.02em;

  /* Fluid Typography Scale */
  --font-size-h1: clamp(2.5rem, 7vw + 1rem, 8.5rem); 
  --font-size-h2: clamp(2rem, 5vw + 1rem, 6.5rem); 
  --font-size-h3: clamp(1.5rem, 3.5vw + 1rem, 4.5rem); 
  --font-size-h4: clamp(1.25rem, 2.5vw + 0.8rem, 3.25rem); 
  --font-size-body: clamp(1rem, 1.6vw + 0.5rem, 2.25rem); 
  --font-size-small: clamp(0.875rem, 1.2vw + 0.5rem, 1.5rem);

  /* --- 3. FLUID SPACING --- */
  --layout-gutter: clamp(1rem, 4vw, 3rem);
  --spacing-xs: clamp(0.5rem, 1vw, 1rem);
  --spacing-sm: clamp(1rem, 2vw, 2rem);
  --spacing-md: clamp(2rem, 4vw, 4rem);
  --spacing-lg: clamp(4rem, 8vw, 8rem);
  --spacing-xl: clamp(6rem, 12vw, 12rem);

  /* --- 3.5. ICONOGRAPHY --- */
  --logo-width-base: clamp(6rem, 12vw, 10rem); 
  --icon-size-base: clamp(1.25rem, 2vw, 1.5rem);

  /* --- 4. CORE AESTHETIC --- */
  --radius-strict: 0px; 

  /* --- 5. MOTION & INTERACTION DNA --- */
  --ease-professional: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-professional);
  --transition-base: 300ms var(--ease-professional);
  --transition-slow: 600ms var(--ease-professional);

  /* --- 6. VIEWPORT & STRUCTURAL TOKENS --- */
  --vh-fallback: 100vh;
  --vh-modern: 100svh;
  --header-offset: clamp(80px, 8vw, 120px)
}

/* GLOBAL RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%; 
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
  background-color: var(--color-primary);
  color: var(--color-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-display: swap;
}

main { flex: 1; }

/* TYPOGRAPHY SCAFFOLDING */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: 1.2;
  font-weight: 400; 
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent); 
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
p { font-size: var(--font-size-body); margin-bottom: var(--spacing-md); }
small { font-size: var(--font-size-small); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* LAYOUT CONTAINERS */
.container {
  width: min(90vw, 1600px);
  margin-inline: auto;
}

.container-fluid {
  width: 100%;
  padding-inline: var(--layout-gutter);
}

/* MOTION STANDARDS & INTERACTIONS */
a, button, input, select, textarea {
  transition: all var(--transition-base);
  border-radius: var(--radius-strict); 
}

button:hover, .btn:hover, .card:hover {
  transform: translateY(-2px);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-strict);
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

.img-hover-scale:hover img {
  transform: scale(1.03);
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-enter {
  animation: fade-in-up var(--transition-slow) forwards;
  will-change: transform, opacity;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-text-light);
}

/* ACCESSIBILITY & SCALABILITY UTILITIES */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   UTILITY CLASSES: VIEWPORT FILLERS
   ========================================================================== */

/* * u-fill-screen: STRICT HORIZONTAL ONLY (Heroes, Single-slide Sliders)
 * Breaks out of the parent .container to fill 100vw and locks the height 
 * to exactly 100vh. No scrolling inside this container.
 */
.u-fill-screen {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--vh-fallback);
  height: var(--vh-modern);
}

/* * u-fill-width: FLOWING VERTICAL & HORIZONTAL (Grids, Catalogs, Forms)
 * Breaks out of the parent .container to fill 100vw, but allows the 
 * container's height to flow naturally so content is never cut off.
 */
.u-fill-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: auto;
}

/* IMAGE REVEAL ENGINE */

/* Initial state: Image is hidden and slightly scaled down */
.u-img-reveal {
  opacity: 0;
  transform: scale(0.95);
  will-change: opacity, transform;
  transition: opacity 0.6s var(--ease-professional), 
              transform 1.2s var(--ease-professional);
}

/* Loaded state: Image fades in and scales up to rest position */
.u-img-reveal.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   UTILITY: GLOBAL IMAGE LOADER (.u-img-loader)
   Add this class to any image wrapper (like a figure or div) in your catalogs.
   ========================================================================== */

/* The container needs relative positioning to center the absolute spinner */
.u-img-loader {
  position: relative;
  background-color: #f3f3f3; /* Light gray placeholder */
}

/* The loading spinner pseudo-element */
.u-img-loader::before {
  content: '';
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(71, 59, 117, 0.2); /* Light accent color track */
  border-top-color: var(--color-accent); /* Solid accent color top */
  border-radius: 50%;
  animation: cdlv-spin 0.8s linear infinite;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Hide the loader spinner automatically the second the child image finishes loading */
.u-img-loader:has(img.is-loaded)::before {
  opacity: 0;
  pointer-events: none;
}

/* Body Scroll Lock */
body.u-chat-open { 
    overflow: hidden !important; 
}

/* --- CSP Compliant Layout Utility Classes --- */
.u-w-100 { width: 100%; }
.u-mt-xs { margin-top: var(--spacing-xs); }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-flex-col { display: flex; flex-direction: column; gap: var(--spacing-sm); }

/* --- ACCESSIBILITY UTILITIES --- */

/* Ensures dynamically focused headings don't show an ugly default outline 
  when programmatically focused via JS.
*/
#cdlv-focus-target:focus {
    outline: none;
}

/* ULTRA-WIDE SCREEN ADJUSTMENTS */
@media (min-width: 1600px) { html { font-size: 110%; } }
@media (min-width: 2000px) { html { font-size: 125%; } }

/* REDUCED MOTION (ACCESSIBILITY) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .u-img-reveal {
    transition: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}