/* ========================================================================
   theme.css
   ---------
   Variables de diseño: paleta, tipografía, espaciados, sombras, easings.
   Paleta: champagne paper + brushed gold + ink black.
   ======================================================================== */

:root {
  /* ── COLORS ──────────────────────────────────────────────── */
  --color-bg:           #FAF9F6;            /* Champagne paper warm */
  --color-bg-card:      #FFFFFF;
  --color-bg-overlay:   rgba(250, 249, 246, 0.92);
  --color-bg-glass:     rgba(250, 249, 246, 0.55);   /* Glassmorphism post-hero */
  --color-primary:      #121212;            /* Ink black */
  --color-accent:       #9C844A;            /* Brushed gold */
  --color-accent-hover: #B89D5A;
  --color-accent-deep:  #7B6739;            /* Para texto sobre fondo claro: contraste AA */
  --color-text:         #1A1A1A;
  --color-text-dim:     #5A5A5A;            /* WCAG AA on bg */
  --color-text-faint:   #8A8A8A;
  --color-border:       rgba(156, 132, 74, 0.2);
  --color-border-soft:  rgba(0, 0, 0, 0.06);
  --color-success:      #3B7A3B;
  --color-error:        #B73E3E;

  /* Variantes para three.js overlay (texto sobre canvas) */
  --color-on-dark:        #FAF9F6;
  --color-on-dark-dim:    rgba(250, 249, 246, 0.7);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  3rem;
  --fs-3xl:  clamp(3rem, 8vw, 6rem);

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.1em;
  --ls-xwide:  0.2em;
  --ls-luxury: 0.3em;

  --lh-tight: 1.2;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* ── SPACING ─────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── RADII ───────────────────────────────────────────────── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-gold: 0 0 0 1px var(--color-accent), 0 8px 24px rgba(156, 132, 74, 0.25);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.20);

  /* ── EASINGS & DURATION ──────────────────────────────────── */
  --ease-luxury:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:     0.15s;
  --dur-base:     0.3s;
  --dur-slow:     0.6s;
  --dur-slower:   1s;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-content:    1200px;
  --max-narrow:     900px;
  --max-search:     320px;
  --header-h:       80px;
  --z-canvas:       0;
  --z-content:      10;
  --z-header:       950;     /* > Leaflet panes (≤700) y controles (≤800) */
  --z-overlay:      900;
  --z-modal:        1100;
  --z-toast:        2000;
  --z-cursor:       9999;
}

/* Forzamos color-scheme light (la web es premium light) */
:root {
  color-scheme: light;
}