/* ============================================================
   DROP Jewelry — Colors & Type Tokens
   Refreshed for high-conversion ecommerce (May 2026)
   ============================================================ */

/* ---------- Web Fonts ----------
   Display: Cormorant Garamond — closest free match to the DROP wordmark
   (refined didone-adjacent serif). FLAGGED: confirm with brand team.
   Body:    Inter — neutral, ecommerce-readable
   Accent:  Italiana — fine high-contrast italic for editorial moments
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=Italiana&display=swap');

:root {
  /* ---------- Brand neutrals (foundation) ---------- */
  --ivory:        #FFFFFF;   /* page bg — pure white */
  --bone:         #F5F2EE;   /* secondary surface — barely cream */
  --sand:         #E8E2D6;   /* dividers, muted blocks */
  --ink:          #111111;   /* primary text, near-black */
  --graphite:     #3A3A3A;   /* secondary text */
  --stone:        #8A8A8A;   /* tertiary text, captions */
  --pearl:        #FFFFFF;   /* product bg, modals */

  /* ---------- Metals (jewelry-native accent palette) ---------- */
  --gold:         #B08D57;   /* primary metal — warm gold */
  --gold-deep:    #8C6A3E;   /* hover/pressed gold */
  --gold-soft:    #E6D2A8;   /* gold tint backgrounds */
  --silver:       #B8B8B8;   /* secondary metal (men's) */
  --silver-deep:  #6F6F6F;
  --rose:         #C9A28F;   /* tertiary metal */

  /* ---------- Semantic ---------- */
  --success:      #4A6B3A;   /* in-stock, deep olive */
  --warning:      #B8602A;   /* low stock, terracotta */
  --error:        #9C3B2E;   /* form errors, oxblood */
  --sale:         #9C3B2E;   /* sale prices */

  /* ---------- Foreground / Background semantic ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--graphite);
  --fg-3: var(--stone);
  --fg-on-dark: var(--ivory);
  --bg-1: var(--ivory);
  --bg-2: var(--bone);
  --bg-3: var(--sand);
  --bg-elevated: var(--pearl);
  --bg-dark: var(--ink);

  /* ---------- Borders ---------- */
  --border-1: rgba(26, 23, 20, 0.08);
  --border-2: rgba(26, 23, 20, 0.16);
  --border-strong: rgba(26, 23, 20, 0.85);

  /* ---------- Type families ---------- */
  --font-display: 'Cormorant Garamond', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-editorial: 'Italiana', 'Cormorant Garamond', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type scale (modular, generous) ---------- */
  --t-display-xl: clamp(56px, 9vw, 120px);
  --t-display-lg: clamp(44px, 6vw, 80px);
  --t-display-md: clamp(32px, 4vw, 56px);
  --t-h1: 40px;
  --t-h2: 28px;
  --t-h3: 20px;
  --t-h4: 16px;
  --t-body: 15px;
  --t-body-sm: 13px;
  --t-caption: 11px;
  --t-eyebrow: 11px;

  /* ---------- Weights ---------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* ---------- Letter spacing ---------- */
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.12em;
  --tracking-body: 0;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii (mostly square — luxury jewelry) ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Shadows (subtle, warm) ---------- */
  --shadow-1: 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-2: 0 4px 16px rgba(26, 23, 20, 0.06);
  --shadow-3: 0 12px 40px rgba(26, 23, 20, 0.10);
  --shadow-product: 0 20px 60px rgba(26, 23, 20, 0.08);

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 480ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.display-xl, .display-lg, .display-md,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--fg-1);
}

.display-xl { font-size: var(--t-display-xl); }
.display-lg { font-size: var(--t-display-lg); }
.display-md { font-size: var(--t-display-md); }
h1 { font-size: var(--t-h1); line-height: 1.1; }
h2 { font-size: var(--t-h2); line-height: 1.2; font-weight: var(--w-regular); }
h3 { font-size: var(--t-h3); font-family: var(--font-body); font-weight: var(--w-medium); letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.caption {
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.price { font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
.price-sale { color: var(--sale); }
.price-strike { color: var(--fg-3); text-decoration: line-through; font-weight: var(--w-regular); }