feat: implement professional typography system with curated font pairings

Typography Presets (research-backed pairings):
- clean: Manrope + Inter (minimal, modern)
- editorial: Playfair Display + Raleway (fashion, lifestyle)
- modern: Space Grotesk + Inter (tech, futuristic)
- classic: Cormorant Garamond + Source Serif 4 (luxury, elegant)
- friendly: Fraunces + Work Sans (playful, quirky)
- minimal: DM Sans + Source Serif 4 (design-forward)
- impulse: Raleway + Inter (wellness, beauty)

Type Scale & Line Heights:
- Major Third (1.25) ratio for mathematical harmony
- H1: line-height 1.1, letter-spacing -0.025em
- H2: line-height 1.15, letter-spacing -0.02em
- H3: line-height 1.2, letter-spacing -0.015em
- Body: line-height 1.5 (WCAG compliant)
- Small text: letter-spacing +0.01em for readability

Fluid Typography:
- Headings use clamp() for smooth mobile→desktop scaling
- Display: 36px→48px, XL: 30px→40px, LG: 24px→32px

Performance:
- Variable font loading where available (Inter, Manrope, etc.)
- Removed unused fonts (Libre Baskerville, Nunito, Source Sans)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/theme-semantic.css

@@ -35,12 +35,12 @@
   --t-text-xl: 1.25em;        /* ~20px at 16px base, ~22px at 18px base */
   --t-text-2xl: 1.5em;        /* ~24px at 16px base, ~27px at 18px base */
 
-  /* Heading sizes - separate scale for headings */
-  --t-heading-sm: 1.25em;     /* h4, h5, h6 */
-  --t-heading-md: 1.5em;      /* h3 */
-  --t-heading-lg: 2em;        /* h2 */
-  --t-heading-xl: 2.5em;      /* h1 */
-  --t-heading-display: 3em;   /* hero/display text */
+  /* Fluid heading sizes - scale smoothly between mobile and desktop */
+  --t-heading-sm: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);    /* 18-20px */
+  --t-heading-md: clamp(1.25rem, 1rem + 1vw, 1.5rem);        /* 20-24px */
+  --t-heading-lg: clamp(1.5rem, 1rem + 2vw, 2rem);           /* 24-32px */
+  --t-heading-xl: clamp(1.875rem, 1.25rem + 2.5vw, 2.5rem);  /* 30-40px */
+  --t-heading-display: clamp(2.25rem, 1.5rem + 3vw, 3rem);   /* 36-48px */
 
   /* Layout */
   --t-layout-max-width: 1400px;
@@ -179,3 +179,61 @@
   color: var(--t-text-primary);
   border-bottom-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
 }
+
+/* ========================================
+   TYPOGRAPHY - Line Heights & Letter Spacing
+   Research-backed values for optimal readability
+   ======================================== */
+
+/* Body text line-height - WCAG 1.5 minimum */
+.shop-container {
+  line-height: 1.5;
+}
+
+/* Heading line-heights - tighter for large text (inverse relationship) */
+.shop-container h1 {
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+.shop-container h2 {
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.shop-container h3 {
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+}
+
+.shop-container h4,
+.shop-container h5,
+.shop-container h6 {
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+/* Small text - slightly wider tracking for readability */
+.shop-container .text-xs,
+.shop-container .text-sm,
+.shop-container .t-caption,
+.shop-container .t-small {
+  letter-spacing: 0.01em;
+}
+
+/* ========================================
+   TYPOGRAPHY - Measure (Line Length)
+   Optimal readability: 45-75 characters
+   ======================================== */
+
+/* Prose content - ideal 65ch for comfortable reading */
+.shop-container .prose,
+.shop-container .product-description,
+.shop-container .about-content {
+  max-width: 65ch;
+}
+
+/* Slightly wider for collection/category descriptions */
+.shop-container .collection-description {
+  max-width: 75ch;
+}