/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Invitación Pascual & Jeanneth
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── PALETA PRINCIPAL ─────────────────────────────── */
  --color-ivory:           #F5F0E8;
  --color-ivory-warm:      #FAF6F0;
  --color-champagne:       #F0E6D3;
  --color-champagne-light: #F7F0E3;
  --color-blush:           #E8D5D0;
  --color-blush-light:     #F2E4E0;
  --color-rose-dust:       #D4B5AD;

  /* ─── DORADOS ──────────────────────────────────────── */
  --color-gold:            #C9A96E;
  --color-gold-dark:       #A88B4A;
  --color-gold-light:      #D4BC8B;
  --color-gold-pale:       #E8D9B8;
  --color-gold-shimmer:    rgba(201, 169, 110, 0.35);
  --color-gold-glow:       rgba(201, 169, 110, 0.15);

  /* ─── TEXTO ────────────────────────────────────────── */
  --color-text-primary:    #3D2B1F;
  --color-text-secondary:  #6B5B4E;
  --color-text-light:      #9B8B7E;
  --color-text-muted:      #B8A99C;
  --color-white:           #FFFCF7;
  --color-white-pure:      #FFFFFF;

  /* ─── SUPERFICIES GLASS ────────────────────────────── */
  --glass-bg:              rgba(255, 252, 247, 0.25);
  --glass-bg-strong:       rgba(255, 252, 247, 0.45);
  --glass-bg-subtle:       rgba(255, 252, 247, 0.12);
  --glass-border:          rgba(201, 169, 110, 0.25);
  --glass-border-light:    rgba(255, 255, 255, 0.3);
  --glass-shadow:          rgba(61, 43, 31, 0.08);

  /* ─── TIPOGRAFÍA ───────────────────────────────────── */
  --font-serif:            'Cormorant Garamond', 'Georgia', serif;
  --font-sans:             'Montserrat', 'Helvetica Neue', sans-serif;

  /* Escala tipográfica fluid (mobile → desktop) */
  --text-xs:               clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
  --text-sm:               clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-base:             clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-lg:               clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-xl:               clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:              clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:              clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl:              clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-5xl:              clamp(3rem, 2rem + 5vw, 5.5rem);
  --text-hero:             clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Pesos */
  --weight-light:          300;
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  /* Interlineado */
  --leading-tight:         1.1;
  --leading-snug:          1.25;
  --leading-normal:        1.5;
  --leading-relaxed:       1.75;

  /* Tracking */
  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.05em;
  --tracking-wider:        0.1em;
  --tracking-widest:       0.2em;
  --tracking-ultra:        0.35em;

  /* ─── ESPACIADO (8px grid) ─────────────────────────── */
  --space-1:               0.25rem;   /* 4px */
  --space-2:               0.5rem;    /* 8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-5:               1.5rem;    /* 24px */
  --space-6:               2rem;      /* 32px */
  --space-8:               3rem;      /* 48px */
  --space-10:              4rem;      /* 64px */
  --space-12:              5rem;      /* 80px */
  --space-16:              7rem;      /* 112px */
  --space-20:              9rem;      /* 144px */

  /* Section padding */
  --section-py:            clamp(4rem, 8vw, 8rem);
  --section-px:            clamp(1.25rem, 5vw, 3rem);

  /* ─── BORDES ───────────────────────────────────────── */
  --radius-sm:             0.375rem;
  --radius-md:             0.75rem;
  --radius-lg:             1rem;
  --radius-xl:             1.5rem;
  --radius-2xl:            2rem;
  --radius-full:           9999px;

  /* ─── SOMBRAS ──────────────────────────────────────── */
  --shadow-sm:             0 1px 3px rgba(61, 43, 31, 0.04);
  --shadow-md:             0 4px 16px rgba(61, 43, 31, 0.06);
  --shadow-lg:             0 8px 32px rgba(61, 43, 31, 0.08);
  --shadow-xl:             0 16px 48px rgba(61, 43, 31, 0.1);
  --shadow-glass:          0 8px 32px rgba(61, 43, 31, 0.06),
                           inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-gold:           0 4px 20px rgba(201, 169, 110, 0.2);
  --shadow-glow:           0 0 30px rgba(201, 169, 110, 0.15);

  /* ─── BLUR ─────────────────────────────────────────── */
  --blur-sm:               8px;
  --blur-md:               16px;
  --blur-lg:               24px;
  --blur-xl:               40px;

  /* ─── TRANSICIONES ─────────────────────────────────── */
  --ease-out-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:        cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-soft:      cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:         200ms;
  --duration-normal:       400ms;
  --duration-slow:         700ms;
  --duration-slower:       1000ms;
  --duration-cinematic:    1500ms;

  /* ─── Z-INDEX SCALE ────────────────────────────────── */
  --z-behind:              -1;
  --z-base:                1;
  --z-content:             10;
  --z-overlay:             100;
  --z-nav:                 500;
  --z-modal:               1000;
  --z-music:               900;
  --z-particles:           5;
  --z-cover:               2000;

  /* ─── 3D ───────────────────────────────────────────── */
  --perspective:           1200px;
  --perspective-deep:      2000px;
}