/* ============================================================
   BELUXARA — Design System · Theme CSS
   "Be Your Own Luxury"
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&family=DM+Mono:wght@300;400&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Core Brand */
  --bx-rose-gold:       #B76E79;
  --bx-rose-gold-light: #C98E97;
  --bx-rose-gold-dark:  #8F4E57;
  --bx-champagne:       #F5DEB3;
  --bx-champagne-light: #FAF0D7;
  --bx-champagne-dark:  #C9956C;

  /* Neutrals */
  --bx-obsidian:        #0C0A0E;
  --bx-obsidian-soft:   #1A1620;
  --bx-obsidian-mid:    #2A2430;
  --bx-ivory:           #FAF7F2;
  --bx-ivory-warm:      #F5EFE6;
  --bx-ivory-mid:       #EDE5D8;
  --bx-platinum:        #D4CEC6;
  --bx-platinum-light:  #E8E4DC;
  --bx-velvet:          #4A1942;
  --bx-velvet-dark:     #2E0E28;

  /* Gradients */
  --bx-gradient-gold:   linear-gradient(135deg, #B76E79 0%, #C9956C 50%, #F5DEB3 100%);
  --bx-gradient-dark:   linear-gradient(180deg, #0C0A0E 0%, #1A1620 100%);
  --bx-gradient-hero:   linear-gradient(160deg, #0C0A0E 0%, #2A1F2E 50%, #1A0F1A 100%);

  /* Typography */
  --bx-font-display:  'Cormorant Garamond', Georgia, serif;
  --bx-font-heading:  'Playfair Display', Georgia, serif;
  --bx-font-body:     'Inter', system-ui, sans-serif;
  --bx-font-mono:     'DM Mono', monospace;

  /* Font Sizes */
  --bx-text-xs:   0.70rem;
  --bx-text-sm:   0.825rem;
  --bx-text-base: 1rem;
  --bx-text-md:   1.125rem;
  --bx-text-lg:   1.375rem;
  --bx-text-xl:   1.75rem;
  --bx-text-2xl:  2.25rem;
  --bx-text-3xl:  3rem;
  --bx-text-hero: clamp(2.5rem, 6vw, 5.5rem);

  /* Letter Spacing */
  --bx-tracking-tight:   -0.02em;
  --bx-tracking-wide:     0.08em;
  --bx-tracking-wider:    0.15em;
  --bx-tracking-widest:   0.25em;

  /* Spacing */
  --bx-space-1:  0.25rem;
  --bx-space-2:  0.5rem;
  --bx-space-3:  0.75rem;
  --bx-space-4:  1rem;
  --bx-space-5:  1.25rem;
  --bx-space-6:  1.5rem;
  --bx-space-8:  2rem;
  --bx-space-10: 2.5rem;
  --bx-space-12: 3rem;
  --bx-space-16: 4rem;
  --bx-space-20: 5rem;

  /* Borders */
  --bx-radius-sm:   4px;
  --bx-radius-md:   8px;
  --bx-radius-lg:   12px;
  --bx-radius-xl:   20px;
  --bx-radius-2xl:  32px;
  --bx-radius-full: 9999px;

  /* Shadows */
  --bx-shadow-sm:  0 1px 3px rgba(183,110,121,0.08);
  --bx-shadow-md:  0 4px 16px rgba(183,110,121,0.12);
  --bx-shadow-lg:  0 8px 32px rgba(183,110,121,0.18);
  --bx-shadow-xl:  0 16px 48px rgba(183,110,121,0.25);
  --bx-shadow-gold:0 4px 24px rgba(183,110,121,0.35);
  --bx-shadow-glow:0 0 30px rgba(183,110,121,0.4), 0 0 60px rgba(183,110,121,0.15);

  /* Animation */
  --bx-ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bx-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --bx-duration-fast: 150ms;
  --bx-duration-mid:  300ms;
  --bx-duration-slow: 600ms;

  /* Z-Index */
  --bx-z-sticky: 100;
  --bx-z-modal:  200;
  --bx-z-toast:  300;

  /* Layout */
  --bx-max-width:      1400px;
  --bx-sidebar-width:  280px;
  --bx-header-height:  72px;
}

/* Dark Mode */
[data-theme="dark"], .dark-mode {
  --bx-bg-primary:    #0C0A0E;
  --bx-bg-secondary:  #1A1620;
  --bx-bg-card:       #2A2430;
  --bx-text-primary:  #FAF7F2;
  --bx-text-secondary:#D4CEC6;
  --bx-text-muted:    rgba(212,206,198,0.6);
  --bx-border-color:  rgba(183,110,121,0.2);
  --bx-border-subtle: rgba(255,255,255,0.06);
}

/* Light Mode */
[data-theme="light"], .light-mode {
  --bx-bg-primary:    #FAF7F2;
  --bx-bg-secondary:  #F5EFE6;
  --bx-bg-card:       #FFFFFF;
  --bx-text-primary:  #0C0A0E;
  --bx-text-secondary:#5A5260;
  --bx-text-muted:    rgba(90,82,96,0.6);
  --bx-border-color:  rgba(183,110,121,0.18);
  --bx-border-subtle: rgba(0,0,0,0.07);
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--bx-font-body);
  background-color: var(--bx-bg-primary, #0C0A0E);
  color: var(--bx-text-primary, #FAF7F2);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--bx-duration-mid), color var(--bx-duration-mid);
}

/* ============================================================ TYPOGRAPHY */
.bx-display { font-family: var(--bx-font-display); font-weight: 300; font-style: italic; letter-spacing: var(--bx-tracking-wide); }
.bx-heading { font-family: var(--bx-font-heading); }
.bx-label { font-size: var(--bx-text-xs); letter-spacing: var(--bx-tracking-widest); text-transform: uppercase; font-weight: 500; }
.bx-text-gold { background: var(--bx-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================================ BUTTONS */
.bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bx-space-2);
  padding: var(--bx-space-3) var(--bx-space-8); border: none; border-radius: var(--bx-radius-full);
  cursor: pointer; font-family: var(--bx-font-body); font-size: var(--bx-text-sm); font-weight: 500;
  letter-spacing: var(--bx-tracking-wider); text-transform: uppercase; text-decoration: none;
  transition: all var(--bx-duration-mid) var(--bx-ease-luxury); white-space: nowrap;
}
.bx-btn-primary { background: var(--bx-gradient-gold); color: #0C0A0E; box-shadow: var(--bx-shadow-gold); }
.bx-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--bx-shadow-glow); }
.bx-btn-secondary { background: transparent; color: var(--bx-rose-gold); border: 1px solid var(--bx-rose-gold); }
.bx-btn-secondary:hover { background: rgba(183,110,121,0.1); transform: translateY(-2px); }
.bx-btn-ghost { background: transparent; color: var(--bx-text-primary, #FAF7F2); border: 1px solid var(--bx-border-subtle, rgba(255,255,255,0.1)); }
.bx-btn-ghost:hover { border-color: var(--bx-rose-gold); color: var(--bx-rose-gold); }

/* ============================================================ CARDS */
.bx-card {
  background: var(--bx-bg-card, #2A2430);
  border: 1px solid var(--bx-border-color, rgba(183,110,121,0.15));
  border-radius: var(--bx-radius-xl); overflow: hidden;
  transition: transform var(--bx-duration-mid) var(--bx-ease-luxury), box-shadow var(--bx-duration-mid);
}
.bx-card:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow-xl); border-color: rgba(183,110,121,0.4); }

/* ============================================================ BADGES */
.bx-badge { display: inline-flex; align-items: center; padding: 3px var(--bx-space-3); border-radius: var(--bx-radius-full); font-size: var(--bx-text-xs); font-weight: 500; letter-spacing: var(--bx-tracking-wide); text-transform: uppercase; }
.bx-badge-gold { background: rgba(183,110,121,0.15); color: var(--bx-champagne); border: 1px solid rgba(183,110,121,0.3); }
.bx-badge-luxe { background: var(--bx-gradient-gold); color: #0C0A0E; }
.bx-badge-new  { background: rgba(107,175,122,0.15); color: #8ED0A0; border: 1px solid rgba(107,175,122,0.3); }

/* ============================================================ LOGO */
.bx-logo { display: flex; align-items: center; gap: var(--bx-space-3); text-decoration: none; }
.bx-logo-img { height: 44px; width: auto; object-fit: contain; }
.bx-logo-text { font-family: var(--bx-font-display); font-size: var(--bx-text-xl); font-weight: 300; letter-spacing: var(--bx-tracking-wider); background: var(--bx-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================================ HEADER */
.bx-header {
  position: sticky; top: 0; z-index: var(--bx-z-sticky);
  height: var(--bx-header-height); display: flex; align-items: center;
  padding: 0 var(--bx-space-8); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bx-border-subtle, rgba(255,255,255,0.06));
  transition: background var(--bx-duration-mid);
}
.dark-mode .bx-header  { background: rgba(12,10,14,0.88); }
.light-mode .bx-header { background: rgba(250,247,242,0.92); }

.bx-nav { display: flex; align-items: center; gap: var(--bx-space-6); list-style: none; }
.bx-nav-link { font-size: var(--bx-text-sm); letter-spacing: var(--bx-tracking-wide); text-transform: uppercase; color: var(--bx-text-secondary, #D4CEC6); text-decoration: none; transition: color var(--bx-duration-fast); position: relative; }
.bx-nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--bx-gradient-gold); transition: width var(--bx-duration-mid) var(--bx-ease-luxury); }
.bx-nav-link:hover, .bx-nav-link.active { color: var(--bx-rose-gold); }
.bx-nav-link:hover::after, .bx-nav-link.active::after { width: 100%; }

/* ============================================================ PILLAR RIBBON */
.bx-pillar-ribbon { display: flex; align-items: center; gap: var(--bx-space-1); overflow-x: auto; scrollbar-width: none; padding: var(--bx-space-3) var(--bx-space-4); }
.bx-pillar-ribbon::-webkit-scrollbar { display: none; }
.bx-pillar-tag { flex-shrink: 0; padding: var(--bx-space-2) var(--bx-space-5); border-radius: var(--bx-radius-full); font-size: var(--bx-text-xs); font-weight: 600; letter-spacing: var(--bx-tracking-widest); text-transform: uppercase; cursor: pointer; border: 1px solid rgba(183,110,121,0.25); color: var(--bx-platinum); background: transparent; transition: all var(--bx-duration-mid) var(--bx-ease-luxury); }
.bx-pillar-tag:hover, .bx-pillar-tag.active { background: var(--bx-gradient-gold); color: #0C0A0E; border-color: transparent; box-shadow: var(--bx-shadow-gold); transform: translateY(-1px); }

/* ============================================================ DIVIDER */
.bx-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #B76E79 30%, #C9956C 50%, #B76E79 70%, transparent 100%); opacity: 0.4; margin: var(--bx-space-8) 0; }

/* ============================================================ SECTION TITLES */
.bx-section-label { font-size: var(--bx-text-xs); letter-spacing: var(--bx-tracking-widest); text-transform: uppercase; color: var(--bx-rose-gold); margin-bottom: var(--bx-space-3); }
.bx-section-title { font-family: var(--bx-font-heading); font-size: var(--bx-text-2xl); color: var(--bx-text-primary, #FAF7F2); margin-bottom: var(--bx-space-4); }
.bx-section-subtitle { font-family: var(--bx-font-display); font-size: var(--bx-text-md); color: var(--bx-text-secondary, #D4CEC6); font-style: italic; font-weight: 300; }

/* ============================================================ SCROLLBAR */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #B76E79, #C9956C); border-radius: var(--bx-radius-full); }
::selection { background: rgba(183,110,121,0.3); color: #F5DEB3; }

/* ============================================================ ANIMATIONS */
@keyframes bx-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes bx-gold-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(183,110,121,0); } 50% { box-shadow: 0 0 20px 4px rgba(183,110,121,0.3); } }
@keyframes bx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.bx-animate-fade-up    { animation: bx-fade-up var(--bx-duration-slow) var(--bx-ease-luxury) both; }
.bx-animate-fade-in    { animation: bx-fade-in var(--bx-duration-slow) both; }
.bx-animate-float      { animation: bx-float 3s ease-in-out infinite; }
.bx-animate-gold-pulse { animation: bx-gold-pulse 2s ease-in-out infinite; }
.bx-shimmer { background: linear-gradient(90deg, rgba(183,110,121,0.1) 0%, rgba(245,222,179,0.3) 50%, rgba(183,110,121,0.1) 100%); background-size: 200% auto; animation: bx-shimmer 2.5s linear infinite; }

/* ============================================================ RESPONSIVE */
@media (max-width: 768px) {
  :root { --bx-header-height: 60px; --bx-text-2xl: 1.75rem; }
  .bx-header { padding: 0 var(--bx-space-4); }
}