/* ============================================================
   VENTA JEWELRY — Colors & Type
   The most fashionable jewelry since 2001.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Majesty";
  src: url("fonts/Majesty-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Majesty";
  src: url("fonts/Majesty-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Majesty";
  src: url("fonts/Majesty-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Majesty";
  src: url("fonts/Majesty-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Majesty";
  src: url("fonts/Majesty-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Majesty Display";
  src: url("fonts/Majesty-Display.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand color tokens ---------- */
  --venta-navy:        #0F203A;  /* Primary — logo navy */
  --venta-navy-deep:   #0A1729;  /* Pressed / deeper backgrounds */
  --venta-navy-soft:   #16294A;  /* Card / elevated surfaces on navy */
  --venta-gold:        #DDB994;  /* Secondary — champagne gold */
  --venta-gold-bright: #E8CBA8;  /* Hover gold (lighter, warmer) */
  --venta-gold-deep:   #B8946C;  /* Pressed gold / stroke gold */

  --venta-ivory:       #F5EFE6;  /* Light surface alt */
  --venta-cream:       #FBF7F1;  /* Lightest light surface */
  --venta-pearl:       #FFFFFF;  /* Pure white — diamonds, light reflections */
  --venta-onyx:        #050B16;  /* Deepest black — pure shadow */

  /* ---------- Semantic surface ---------- */
  --bg:                var(--venta-navy);
  --bg-elevated:       var(--venta-navy-soft);
  --bg-deep:           var(--venta-navy-deep);
  --bg-light:          var(--venta-cream);

  --fg-1:              #F5EFE6;            /* Primary text on dark — warm ivory */
  --fg-2:              rgba(245,239,230,.75);  /* Secondary text on dark */
  --fg-3:              rgba(245,239,230,.55);  /* Tertiary / muted on dark */
  --fg-on-light-1:     var(--venta-navy);
  --fg-on-light-2:     rgba(15,32,58,.70);

  --accent:            var(--venta-gold);
  --accent-hover:      var(--venta-gold-bright);
  --accent-press:      var(--venta-gold-deep);

  --hairline:          rgba(221,185,148,.30); /* Gold hairline divider */
  --hairline-strong:   rgba(221,185,148,.55);
  --hairline-light:    rgba(15,32,58,.12);

  /* ---------- Type families ---------- */
  --font-display:      "Majesty Display", "Majesty", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif:        "Majesty", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:         "Inter", "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif;
  --font-mono:         "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Tracking — luxury brands use generous tracking on UPPERCASE micro labels */
  --tracking-eyebrow:  0.32em;
  --tracking-button:   0.20em;
  --tracking-label:    0.12em;
  --tracking-tight:    -0.01em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(5,11,22,.20);
  --shadow-2: 0 8px 24px rgba(5,11,22,.35);
  --shadow-3: 0 20px 60px rgba(5,11,22,.55);
  --glow-gold: 0 0 0 1px rgba(221,185,148,.30), 0 12px 32px rgba(221,185,148,.18);

  /* ---------- Motion ---------- */
  --ease-luxury:  cubic-bezier(.22,.61,.36,1);   /* slow-in, soft-out */
  --ease-quick:   cubic-bezier(.4,.0,.2,1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;

  /* ---------- Type sizes — semantic ---------- */
  --fs-display:    clamp(48px, 8vw, 96px);
  --fs-h1:         clamp(36px, 6vw, 64px);
  --fs-h2:         clamp(28px, 4.5vw, 44px);
  --fs-h3:         clamp(22px, 3.5vw, 30px);
  --fs-h4:         clamp(18px, 2.6vw, 22px);
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-eyebrow:    11px;
  --fs-button:     12px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.v-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.v-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.v-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.v-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.v-h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

.v-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
}

.v-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}

/* Eyebrow — uppercase micro-label, often gold, with center diamond divider above headings */
.v-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Button label — uppercase, generous tracking */
.v-button-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

/* Signature — script flourish (Majesty Display flourish weight) */
.v-signature {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  font-style: italic;
  color: var(--accent);
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: var(--venta-navy);
}