:root {
  /* --- families --- */
  --font-script: "Great Vibes", "Apple Chancery", cursive;
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --font-sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  /* --- ramp --- */
  --text-2xs: 0.6875rem; /* 11px - legal, care symbols */
  --text-xs: 0.75rem;    /* 12px - eyebrows, badges */
  --text-sm: 0.8125rem;  /* 13px - meta, helper */
  --text-base: 0.9375rem;/* 15px - body */
  --text-md: 1.0625rem;  /* 17px - lead body */
  --text-lg: 1.375rem;   /* 22px - card titles */
  --text-xl: 1.75rem;    /* 28px - section heads */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4.25rem;   /* 68px - hero */
  --text-5xl: 6rem;      /* 96px - script hero */

  /* --- weights --- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- leading --- */
  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.68;

  /* --- tracking. Caps are ALWAYS generously letterspaced in this brand. --- */
  --tracking-script: 0;
  --tracking-display: -0.008em;
  --tracking-body: 0.006em;
  --tracking-caps: 0.18em;
  --tracking-caps-wide: 0.32em; /* "F A S H I O N  *  B E A U T Y" */

  /* --- composed roles --- */
  --type-logotype: var(--weight-regular) var(--text-4xl) / 1.1 var(--font-script);
  --type-hero: var(--weight-light) var(--text-3xl) / var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-light) var(--text-2xl) / var(--leading-snug) var(--font-display);
  --type-h2: var(--weight-regular) var(--text-xl) / var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-medium) var(--text-lg) / var(--leading-snug) var(--font-display);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-sans);
  --type-lead: var(--weight-light) var(--text-md) / var(--leading-relaxed) var(--font-sans);
  --type-meta: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
  --type-eyebrow: var(--weight-medium) var(--text-xs) / 1.3 var(--font-sans);
  --type-button: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
  --type-price: var(--weight-medium) var(--text-md) / 1.2 var(--font-display);
}