/* ============================================
   THEME: Classic Elegance (Version 1)
   ============================================
   Luxury printed invitation converted to digital.
   Typography-driven. Narrow centered column.
   Maximum whitespace. Only fade animations.
   NO decorative elements beyond thin golden lines.
   ============================================ */

/* ----- Local Font Faces ----- */
@font-face {
  font-family: 'Perandory';
  src: url('../fonts/PerandorySemiCondensed.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel Local';
  src: url('../fonts/cinzel/Cinzel-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- CSS Custom Properties ----- */
:root {
  /* ---- Colors ---- */

  /* Primary: Bordo */
  --color-primary: #591E29;
  --color-primary-light: #732735;
  --color-primary-dark: #3D1519;
  --color-primary-darker: #2A0E11;

  /* Secondary: Neutros */
  --color-secondary: #D8D9D7;
  --color-secondary-light: #F2F2F0;

  /* Accent: Tierra */
  --color-accent: #8C7F68;

  /* Golden: Decorative lines & accents */
  --color-golden: #D4AF37;
  --color-golden-light: #E8C84A;
  --color-golden-dark: #B8960E;

  /* Neutral */
  --color-white: #FFFFFF;
  --color-cream: #F2F2F0;
  --color-warm-bg: #EDE8E2;
  --color-black: #2C1810;

  /* ---- Typography: Families ---- */
  --font-display: 'Pinyon Script', cursive;        /* Names, hero display */
  --font-heading: 'Cinzel', 'Cinzel Local', serif;  /* Section titles, labels */
  --font-body: 'Montserrat', sans-serif;             /* Body text, form inputs */
  --font-decorative: 'Perandory', serif;             /* Special decorative use */

  /* ---- Typography: Scale ---- */
  --text-xs: clamp(0.675rem, 0.6rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.7rem + 0.35vw, 0.925rem);
  --text-base: clamp(0.925rem, 0.85rem + 0.25vw, 1.05rem);
  --text-md: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  --text-hero: clamp(4rem, 3rem + 3vw, 8rem);

  /* ---- Typography: Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Typography: Letter Spacing ---- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.2em;
  --tracking-widest: 0.35em;

  /* ---- Typography: Line Height ---- */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- V1-Specific: Narrow Layout ---- */
  --v1-column-width: 480px;           /* Mobile: narrow centered column */
  --v1-column-width-desktop: 560px;   /* Desktop: slightly wider */
  --content-width: var(--v1-column-width);
  --content-padding: clamp(1.5rem, 5vw, 3rem);

  /* ---- Borders ---- */
  --border-golden: 1px solid var(--color-golden);
  --border-golden-faint: 1px solid rgba(212, 175, 55, 0.35);
  --border-radius-pill: 50px;

  /* ---- V1-Specific: Slow Transitions (800ms+) ---- */
  --transition-fast: 300ms ease;
  --transition-base: 500ms ease;
  --transition-slow: 800ms ease;
  --transition-slower: 1200ms ease;
  --transition-slowest: 1600ms ease;

  /* Fade durations for V1 */
  --v1-fade: 1000ms ease;
  --v1-fade-slow: 1200ms ease;
  --v1-fade-hero: 1400ms ease;

  /* ---- Z-index Layers ---- */
  --z-base: 1;
  --z-nav: 100;
  --z-countdown: 200;
  --z-music: 300;
  --z-overlay: 1000;

  /* ---- Countdown Bar ---- */
  --countdown-bar-height: 34px;
}

/* Desktop: widen the column slightly */
@media (min-width: 768px) {
  :root {
    --content-width: var(--v1-column-width-desktop);
  }
}