/* ============================================================
  LIORA REDESIGN – Typography Tokens
  Display: Cormorant Garamond (elegant serif)
  Body: Montserrat (clean geometric sans)
   Note: Google Fonts substitution — originals may differ slightly.
   Request .ttf files from brand team for precise matching.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Font Families ───────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;

  /* ── Type Scale (rem) ────────────────────────────────────── */
  --text-xs:   0.6875rem;  /* 11px – legal, captions */
  --text-sm:   0.8125rem;  /* 13px – meta, labels */
  --text-base: 1rem;       /* 16px – body */
  --text-lg:   1.125rem;   /* 18px – large body */
  --text-xl:   1.3125rem;  /* 21px – card title */
  --text-2xl:  1.5rem;     /* 24px – small heading */
  --text-3xl:  2.0625rem;  /* 33px – section heading */
  --text-4xl:  2.375rem;   /* 38px – page heading */
  --text-5xl:  2.625rem;   /* 42px – hero */
  --text-6xl:  3.25rem;    /* 52px – large hero */
  --text-7xl:  4rem;       /* 64px – oversized hero */

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;
  --tracking-caps:     0.14em;  /* for all-caps taglines */

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Semantic Type Roles ─────────────────────────────────── */
  --type-display-family:   var(--font-display);
  --type-display-weight:   var(--weight-medium);
  --type-display-tracking: var(--tracking-normal);
  --type-display-leading:  var(--leading-tight);

  --type-heading-family:   var(--font-display);
  --type-heading-weight:   var(--weight-medium);
  --type-heading-tracking: var(--tracking-normal);
  --type-heading-leading:  var(--leading-snug);

  --type-tagline-family:   var(--font-body);
  --type-tagline-weight:   var(--weight-light);
  --type-tagline-tracking: var(--tracking-caps);
  --type-tagline-transform: uppercase;

  --type-body-family:      var(--font-body);
  --type-body-weight:      var(--weight-regular);
  --type-body-tracking:    var(--tracking-normal);
  --type-body-leading:     var(--leading-relaxed);

  --type-label-family:     var(--font-body);
  --type-label-weight:     var(--weight-semibold);
  --type-label-tracking:   var(--tracking-wider);
  --type-label-transform:  uppercase;

  /* Buttons / nav use a slightly tighter 0.10em track in the design. */
  --type-button-tracking:  0.10em;

  --type-price-family:     var(--font-body);
  --type-price-weight:     var(--weight-semibold);
}