/* ═══════════════════════════════════════════════════════════
   LYRION ATELIER - MASTER TYPE SCALE
   Typography tokens (sizes, weights, tracking, leading) for the site.
   Prefer using these custom properties in component CSS instead of
   introducing new hardcoded type values.
   Two font families only:
     Display/headings: Cormorant Garamond (serif)
     Body/UI: Inter (sans-serif)
   Cinzel is kept as a secondary display face via CSS var only.
═══════════════════════════════════════════════════════════ */

:root {
  /* --- Font families (two maximum) --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Scale steps --- */
  --text-xs:   0.75rem;   /* small print, labels      */
  --text-sm:   0.875rem;  /* captions, meta            */
  --text-base: 1.0625rem; /* body copy                 */
  --text-lg:   1.25rem;   /* lead paragraph            */
  --text-xl:   clamp(1.2rem, 2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 3vw, 2rem);
  --text-3xl:  clamp(1.8rem, 3.5vw, 2.4rem);
  --text-4xl:  clamp(2rem, 4.5vw, 3rem);
  --text-5xl:  clamp(2.25rem, 5vw, 3.5rem);

  /* --- Weights --- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* --- Line heights --- */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;
}

/* ----------------------------------------------------------------
   Base reset - sets defaults for the whole site
----------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--ink);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* ----------------------------------------------------------------
   Heading scale
----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--plum);
  text-align: left;
  margin-top: 0;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  }
h6 { font-size: var(--text-lg);  }

/* Page title only - centred */
.page-title {
  text-align: center;
}

/* ----------------------------------------------------------------
   Section headings - caps, bold, wide tracking
----------------------------------------------------------------- */
.section-heading,
.pdp-row-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--plum);
  text-align: left;
  margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------------
   Body copy
----------------------------------------------------------------- */
p {
  line-height: var(--leading-normal);
  text-align: left;
  max-width: 34rem;
}

/* ----------------------------------------------------------------
   Small print
----------------------------------------------------------------- */
small,
.text-small,
.muted {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ----------------------------------------------------------------
   Lead / intro paragraph
----------------------------------------------------------------- */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}