/* =============================================================
   Stylex Jewelry — Design Tokens (fonts loaded separately via <link>)
   ============================================================= */
:root {
  /* Onyx / Neutral dark ramp */
  --stx-onyx-900:#0B0B0D; --stx-onyx-800:#15151A; --stx-onyx-700:#1F1F25;
  --stx-onyx-600:#2A2A32; --stx-onyx-500:#3D3D47; --stx-onyx-400:#5A5A66;
  --stx-onyx-300:#8A8A95; --stx-onyx-200:#B8B8C0; --stx-onyx-100:#D8D8DC;
  /* Ivory / warm light ramp */
  --stx-ivory-50:#FAF7F1; --stx-ivory-100:#F2EDE2; --stx-ivory-200:#E6DFCF;
  --stx-ivory-300:#C8BFA8; --stx-ivory-400:#9A9281; --stx-ivory-500:#6B6557;
  --stx-ivory-600:#3D3A33; --stx-ivory-700:#1E1C18;
  /* Champagne gold */
  --stx-gold-50:#FDF4D4; --stx-gold-100:#F9E296; --stx-gold-200:#F2CC54;
  --stx-gold-300:#ECBA2E; --stx-gold-400:#E6A81B; --stx-gold-500:#C28A12;
  --stx-gold-600:#93680D; --stx-gold-700:#654809;
  /* Tungsten */
  --stx-tungsten-100:#C5C7CC; --stx-tungsten-300:#8A8E96; --stx-tungsten-500:#5C6068; --stx-tungsten-700:#2E3137;
  /* State */
  --stx-success:#4F7A4F; --stx-danger:#8A2F2F; --stx-warn:#B27A1F;

  /* Semantic (light) */
  --bg:var(--stx-ivory-50); --bg-elevated:#FFFFFF; --bg-muted:var(--stx-ivory-100); --bg-inverse:var(--stx-onyx-900);
  --fg:var(--stx-ivory-700); --fg-body:var(--stx-ivory-600); --fg-muted:var(--stx-ivory-500); --fg-subtle:var(--stx-ivory-400); --fg-inverse:var(--stx-ivory-50);
  --accent:var(--stx-gold-400); --accent-hover:var(--stx-gold-500); --accent-soft:var(--stx-gold-50);
  --hairline:var(--stx-ivory-200); --hairline-strong:var(--stx-ivory-300); --hairline-gold:var(--stx-gold-300);

  /* Type */
  --font-display:"Cormorant Garamond","Garamond","Times New Roman",serif;
  --font-body:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"DM Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:2rem; --fs-40:2.5rem; --fs-56:3.5rem; --fs-80:5rem; --fs-120:7.5rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-base:1.55; --lh-loose:1.7;
  --ls-eyebrow:.22em; --ls-tight:-.02em; --ls-normal:0;

  /* Spacing (8pt) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:2.5rem; --sp-8:3rem; --sp-9:4rem; --sp-10:6rem; --sp-11:8rem;

  /* Radii */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 1px rgba(11,11,13,.04);
  --shadow-sm:0 1px 2px rgba(11,11,13,.06),0 1px 1px rgba(11,11,13,.04);
  --shadow-md:0 6px 16px -8px rgba(11,11,13,.12),0 2px 4px -2px rgba(11,11,13,.06);
  --shadow-lg:0 24px 48px -24px rgba(11,11,13,.25),0 8px 16px -8px rgba(11,11,13,.10);
  --shadow-gold:0 8px 24px -12px rgba(193,155,68,.45);

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1); --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;

  /* Layout */
  --container:1280px; --container-wide:1440px; --container-text:720px;
  --border-hairline:1px solid var(--hairline); --border-gold:1px solid var(--stx-gold-300);
}

/* Semantic typography */
.h1,h1,.h2,h2,.h3,h3{font-family:var(--font-display);font-weight:500;color:var(--fg);}
h1,.h1{font-size:clamp(2.25rem,5vw,var(--fs-56));line-height:1.1;letter-spacing:var(--ls-tight);margin:0 0 var(--sp-5);}
h2,.h2{font-size:clamp(1.75rem,3.5vw,var(--fs-40));line-height:1.15;letter-spacing:-.015em;margin:0 0 var(--sp-4);}
h3,.h3{font-size:var(--fs-32);line-height:1.2;margin:0 0 var(--sp-3);}
h4,.h4{font-family:var(--font-body);font-weight:600;font-size:var(--fs-20);line-height:1.3;color:var(--fg);margin:0 0 var(--sp-3);}
p,.body{font-family:var(--font-body);font-size:var(--fs-16);line-height:var(--lh-base);color:var(--fg-body);margin:0 0 var(--sp-4);}
.lead{font-size:var(--fs-18);line-height:1.6;color:var(--fg-body);}
.eyebrow{font-family:var(--font-body);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--stx-gold-500);display:inline-flex;align-items:center;gap:12px;}
.eyebrow--inverse{color:var(--stx-gold-300);}
.eyebrow .rule{width:32px;height:1px;background:currentColor;opacity:.85;}
.caption{font-size:var(--fs-13);line-height:1.5;color:var(--fg-muted);}
.price{font-family:var(--font-body);font-weight:700;font-size:var(--fs-24);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--fg);}
.sku,.mono{font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:.04em;color:var(--fg-muted);}
.stx-rule{display:inline-block;width:56px;height:1px;background:var(--stx-gold-400);vertical-align:middle;}