/* ============================================
   LUMI EVENTS — Design System
   Extracted from HTML mockup style.css
   Author: SlingSoft Apps (slingsoft.app)
   ============================================ */

/* ── TOKENS ── */
:root {
  --lumi-gold: #B8922E;
  --lumi-gold-light: #D4B65A;
  --lumi-gold-dark: #8A6D1F;
  --lumi-burgundy: #7A2D40;
  --lumi-burgundy-dark: #5C1E30;
  --lumi-burgundy-light: #9E3D55;
  --lumi-cream: #FDF8F0;
  --lumi-warm-white: #FFFCF7;
  --lumi-ivory: #F5EFE3;
  --lumi-light-section: #F8F4EC;
  --lumi-white: #FFFFFF;
  --lumi-charcoal: #1E1E2A;
  --lumi-text-dark: #2C2C3A;
  --lumi-text-body: #5A5A6E;
  --lumi-text-muted: #8E8E9E;
  --lumi-border: rgba(0,0,0,0.08);

  --lumi-gradient-gold: linear-gradient(135deg, var(--lumi-gold), var(--lumi-gold-light), var(--lumi-gold));
  --lumi-gradient-burgundy: linear-gradient(135deg, var(--lumi-burgundy), var(--lumi-burgundy-light));

  --lumi-shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --lumi-shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --lumi-shadow-lg: 0 20px 50px rgba(0,0,0,0.1);
  --lumi-shadow-gold: 0 8px 30px rgba(184,146,46,0.2);

  --lumi-radius: 16px;
  --lumi-radius-sm: 8px;
  --lumi-radius-md: 12px;

  --lumi-transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);

  --lumi-font-heading: 'Playfair Display', serif;
  --lumi-font-body: 'Inter', sans-serif;
}

/* ── RESETS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--lumi-font-body);
  background: var(--lumi-warm-white);
  color: var(--lumi-text-body);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lumi-font-heading);
  color: var(--lumi-charcoal);
  line-height: 1.2;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
a { text-decoration: none; color: inherit; transition: var(--lumi-transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ── LAYOUT ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-padding { padding: 100px 0; }

/* ── SECTION LABELS ── */
.lumi-section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--lumi-font-body); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 3px; color: var(--lumi-burgundy);
  margin-bottom: 16px;
}
.lumi-section-label::before { content: ''; width: 40px; height: 2px; background: var(--lumi-gold); }
.lumi-section-title { margin-bottom: 20px; }
.lumi-section-desc { max-width: 640px; font-size: 1.05rem; color: var(--lumi-text-muted); margin-bottom: 48px; }
.text-center { text-align: center; }
.text-center .lumi-section-desc { margin-inline: auto; }

.lumi-gold-text {
  background: var(--lumi-gradient-gold);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BUTTONS ── */
.lumi-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 36px; border-radius: 50px;
  font-family: var(--lumi-font-body); font-weight: 600; font-size: .9rem;
  letter-spacing: 1px; text-transform: uppercase;
  border: none; cursor: pointer; transition: var(--lumi-transition);
  position: relative; overflow: hidden;
}
.lumi-btn-primary { background: var(--lumi-gradient-gold); color: var(--lumi-white); box-shadow: var(--lumi-shadow-gold); }
.lumi-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(184,146,46,0.35); }
.lumi-btn-burgundy { background: var(--lumi-gradient-burgundy); color: var(--lumi-white); }
.lumi-btn-burgundy:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(122,45,64,0.3); }
.lumi-btn-outline { background: transparent; color: var(--lumi-burgundy); border: 2px solid var(--lumi-burgundy); }
.lumi-btn-outline:hover { background: var(--lumi-burgundy); color: var(--lumi-white); }
.lumi-btn-outline-gold { background: transparent; color: var(--lumi-gold-dark); border: 2px solid var(--lumi-gold); }
.lumi-btn-outline-gold:hover { background: var(--lumi-gold); color: var(--lumi-white); }

/* ── ANIMATIONS ── */
@keyframes lumiFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.lumi-reveal { opacity: 0; transform: translateY(30px); transition: all .8s ease; }
.lumi-reveal.visible { opacity: 1; transform: translateY(0); }