/* ============================================================
   EVANIA FINE JEWELLERY — DESIGN SYSTEM
   Luxury Design Tokens & Variables
   ============================================================ */

:root {
  /* ─── Color Palette ─── */
  --color-primary-bg: #1E1532;
  --color-secondary-bg: #2B1A45;
  --color-gold: #D4AF37;
  --color-gold-light: #E8C84A;
  --color-gold-dark: #B8942E;
  --color-cream: #F8F4EA;
  --color-white: #FFFFFF;
  --color-text: #333333;
  --color-text-light: #555555;
  --color-muted: #777777;
  --color-border: rgba(212, 175, 55, 0.15);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-overlay: rgba(30, 21, 50, 0.85);
  --color-glass: rgba(255, 255, 255, 0.04);
  --color-error: #D32F2F;
  --color-success: #2E7D32;
  --color-wishlist: #E91E63;

  /* ─── Gradients ─── */
  /* Two-stop vertical sheen instead of a 3-stop 135deg metallic ramp. The old
     #E8C84A -> #B8942E span was wide enough to read as a gradient effect in its
     own right (a dated web look); this tighter range reads as one gold surface
     catching light from above. Brand gold #D4AF37 stays the midpoint. */
  --gradient-gold: linear-gradient(180deg, #DCB945 0%, #C4A030 100%);
  --gradient-dark: linear-gradient(180deg, #1E1532 0%, #2B1A45 100%);
  --gradient-hero: linear-gradient(180deg, #1E1532 0%, rgba(30, 21, 50, 0.6) 40%, transparent 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);

  /* ─── Shadows ─── */
  /* A continuous ladder. Previously --shadow-card (0 2px 12px @6%) jumped
     straight to --shadow-hover (0 12px 48px @15%) on hover — a 4x blur and
     2.5x opacity leap that read as the card popping rather than lifting.
     Each step here is roughly 1.5x the last, and every shadow is two layers:
     a tight contact shadow plus a wider ambient one, which is how real
     objects sit on a surface. */
  --shadow-xs: 0 1px 2px rgba(30, 21, 50, 0.04), 0 1px 3px rgba(30, 21, 50, 0.03);
  --shadow-sm: 0 1px 3px rgba(30, 21, 50, 0.05), 0 2px 8px rgba(30, 21, 50, 0.04);
  --shadow-md: 0 2px 6px rgba(30, 21, 50, 0.06), 0 6px 16px rgba(30, 21, 50, 0.06);
  --shadow-lg: 0 4px 12px rgba(30, 21, 50, 0.07), 0 12px 28px rgba(30, 21, 50, 0.08);
  --shadow-xl: 0 8px 20px rgba(30, 21, 50, 0.08), 0 20px 48px rgba(30, 21, 50, 0.10);
  --shadow-gold: 0 2px 8px rgba(212, 175, 55, 0.18), 0 8px 24px rgba(212, 175, 55, 0.14);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: var(--shadow-lg);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* ─── Typography ─── */
  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;

  /* Raised across the board for readability. The buyers here are largely
     over 40 and 12px labels were not legible for them. The small end moves
     most, because that is where the strain was: nothing on the site is set
     below 14px now, and body copy starts at 18px. Display sizes above 4xl
     are clamp()ed elsewhere and were already large enough. */
  --text-xs: 0.875rem;    /* 14px, was 12 */
  --text-sm: 1rem;        /* 16px, was 14 */
  --text-base: 1.125rem;  /* 18px, was 16 */
  --text-lg: 1.25rem;     /* 20px, was 18 */
  --text-xl: 1.375rem;    /* 22px, was 20 */
  --text-2xl: 1.625rem;   /* 26px, was 24 */
  --text-3xl: 2.125rem;   /* 34px, was 32 */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.5rem;     /* 56px */
  --text-6xl: 4.5rem;     /* 72px */

  --font-weight-light: 400;   /* was 300 — too faint for body copy on a wide screen */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-base: 1.7;
  --line-height-relaxed: 1.8;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-base: 0.02em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.15em;
  --letter-spacing-widest: 0.25em;

  /* ─── Fluid Display Type Scale ───
     Existing --text-* tokens stay untouched; these are additive for
     large serif headings that need to scale with the viewport instead
     of jumping at breakpoints. */
  --text-display-lg: clamp(2.75rem, 1.95rem + 3.2vw, 4.5rem);  /* hero-title: 44px → 72px */
  --text-display-md: clamp(2.5rem, 1.95rem + 2.3vw, 3.75rem);  /* page-header h1: 40px → 60px */
  --text-display-sm: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);     /* section-title: 36px → 48px */
  --line-height-display: 1.05;  /* hero-title only; other display headings keep --line-height-tight */

  /* ─── Spacing (8px scale) ─── */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-7: 1.75rem;    /* 28px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  --space-28: 7rem;      /* 112px */
  --space-32: 8rem;      /* 128px */

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* Was five competing surface radii (4/8/12/16/24) alongside fully-round
     buttons; the 24px surfaces in particular read soft and bubbly rather than
     editorial. Tightened to a close family so surfaces feel like one material.
     --radius-full stays for buttons and icon controls, where a true pill is a
     deliberate brand cue (it echoes bangles and rings), not an inconsistency. */
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-ease: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ─── Spring easings ───
     Real spring curves, not bezier approximations: each was generated by
     numerically solving the damped-spring equation and sampling it into a
     CSS linear() ramp, using Apple's damping-ratio + response parameters
     rather than mass/stiffness. No JS and no animation library needed —
     linear() is supported in all current evergreen browsers, and anything
     older falls back to the linear timing function, degrading to a plain
     move rather than breaking.

     Use each -duration token alongside its easing: the durations are the
     computed settle times, so motion finishes exactly as the spring rests.

     Pair with intent — damped for anything that merely appears (overshoot on
     a menu that faded in feels wrong), bounce only where the interaction
     itself carried momentum. */

  /* damping 1.0, response 0.40s — default UI motion, settles without overshoot */
  --ease-spring-duration: 0.608s;
  --ease-spring: linear(0, 0.061 4.2%, 0.1897 8.3%, 0.3351 12.5%, 0.4724 16.7%, 0.5912 20.8%, 0.6889 25.0%, 0.7664 29.2%, 0.8266 33.3%, 0.8725 37.5%, 0.9069 41.7%, 0.9325 45.8%, 0.9513 50.0%, 0.965 54.2%, 0.975 58.3%, 0.9822 62.5%, 0.9873 66.7%, 0.991 70.8%, 0.9937 75.0%, 0.9955 79.2%, 0.9969 83.3%, 0.9978 87.5%, 0.9985 91.7%, 0.9989 95.8%, 0.9992);

  /* damping 1.0, response 0.25s — press and other immediate feedback */
  --ease-spring-snappy-duration: 0.388s;
  --ease-spring-snappy: linear(0, 0.0633 4.2%, 0.1958 8.3%, 0.3442 12.5%, 0.4832 16.7%, 0.6025 20.8%, 0.6997 25.0%, 0.7763 29.2%, 0.8353 33.3%, 0.8798 37.5%, 0.9129 41.7%, 0.9374 45.8%, 0.9552 50.0%, 0.9681 54.2%, 0.9774 58.3%, 0.984 62.5%, 0.9887 66.7%, 0.9921 70.8%, 0.9945 75.0%, 0.9961 79.2%, 0.9973 83.3%, 0.9981 87.5%, 0.9987 91.7%, 0.9991 95.8%, 0.9994);

  /* damping 0.8, response 0.35s — peaks at 1.015, i.e. a 1.5% overshoot */
  --ease-spring-bounce-duration: 0.493s;
  --ease-spring-bounce: linear(0, 0.0558 4.2%, 0.1826 8.3%, 0.3359 12.5%, 0.4883 16.7%, 0.6248 20.8%, 0.7386 25.0%, 0.8282 29.2%, 0.8953 33.3%, 0.9431 37.5%, 0.9754 41.7%, 0.9958 45.8%, 1.0076 50.0%, 1.0133 54.2%, 1.0151 58.3%, 1.0146 62.5%, 1.0128 66.7%, 1.0105 70.8%, 1.0082 75.0%, 1.0061 79.2%, 1.0043 83.3%, 1.0028 87.5%, 1.0018 91.7%, 1.001 95.8%, 1.0005);

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-wide: 1440px;
  --nav-height: 96px;   /* the logo is a stacked lockup, not a horizontal one —
                           at 80px the wordmark under the monogram was ~10px tall */
  --announcement-height: 40px;

  /* ─── Z-Index Scale ─── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-optical-sizing: auto;   /* Fraunces carries an opsz axis */
  line-height: var(--line-height-tight);
  color: var(--color-primary-bg);
}

/* ─── Container ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ─── Section Spacing ─── */
.section {
  padding: var(--space-20) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--text-display-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-bg);
  letter-spacing: var(--letter-spacing-tight);
  font-optical-sizing: auto;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto;
  font-weight: var(--font-weight-light);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-slow);
}

.btn:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-primary {
  background: var(--gradient-gold);
  color: var(--color-white);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-bg);
  border: 1px solid rgba(30, 21, 50, 0.2);
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-5) var(--space-12);
  font-size: var(--text-base);
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-light);
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.badge-gold {
  background: rgba(212, 175, 55, 0.1);
  color: var(--color-gold);
}

.badge-sale {
  background: rgba(233, 30, 99, 0.1);
  color: var(--color-wishlist);
}

.badge-new {
  background: rgba(46, 125, 50, 0.1);
  color: var(--color-success);
}

/* ─── Glassmorphism ─── */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-dark {
  background: rgba(30, 21, 50, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Grid ─── */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Typography Utilities ─── */
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-muted); }
.text-white { color: var(--color-white); }
.text-dark { color: var(--color-primary-bg); }
.text-center { text-align: center; }

.heading-xl {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

.heading-lg {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: var(--line-height-tight);
}

/* ─── Animations ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    transition: none;
  }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

/* ─── Selection ─── */
::selection {
  background: var(--color-gold);
  color: var(--color-white);
}