/* Rooma Design System — Typography Tokens
 *
 * Two typefaces only:
 *  — Cormorant Garamond: brand personality and prestige (display, headings, stats, pull quotes)
 *  — DM Sans:            functional precision (body, labels, captions, navigation, UI)
 */

:root {
  /* ── Font stacks ────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Letter spacing ─────────────────────────────────── */
  --tracking-wordmark: 0.24em;   /* ROOMA wordmark + heading all-caps */
  --tracking-overline: 0.26em;   /* Gilt overline labels               */
  --tracking-label:    0.14em;   /* Section labels, metadata           */
  --tracking-caption:  0.10em;   /* Footer text, footnotes             */
  --tracking-tight:   -0.01em;   /* Display headings                   */

  /* ── Display scale (Cormorant Garamond) ─────────────── */
  --text-hero:      300 72px/1.04 var(--font-display);   /* Cover / pitch hero   */
  --text-section:   300 52px/1.10 var(--font-display);   /* Section headings     */
  --text-heading:   300 36px/1.15 var(--font-display);   /* Content headings     */
  --text-subhead:   300 28px/1.30 var(--font-display);   /* Subheadings          */
  --text-display-sm:300 22px/1.40 var(--font-display);   /* Pull quotes, callouts*/
  --text-stat:      300 52px/1.00 var(--font-display);   /* Big statistics       */
  --text-stat-lg:   300 72px/1.00 var(--font-display);   /* Hero statistics      */

  /* ── UI / body scale (DM Sans) ──────────────────────── */
  --text-intro:     300 19px/1.70 var(--font-sans);   /* Large intro paragraphs */
  --text-body:      400 16px/1.72 var(--font-sans);   /* Standard body copy     */
  --text-body-sm:   400 14px/1.70 var(--font-sans);   /* Compact body copy      */
  --text-ui:        400 15px/1.65 var(--font-sans);   /* UI element text        */
  --text-label:     500 13px/1.00 var(--font-sans);   /* Form labels, UI labels */
  --text-overline:  500 11px/1.00 var(--font-sans);   /* ALL-CAPS overlines     */
  --text-caption:   400 12px/1.60 var(--font-sans);   /* Captions, footnotes    */
  --text-footnote:  400 11px/1.55 var(--font-sans);   /* Footer text            */
  --text-micro:     400 10px/1.50 var(--font-sans);   /* Micro labels           */
}