/* ═══════════════════════════════════════════════════════════════════════════
   Typography Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ─── Font Families ─────────────────────────────────────────────────────── */
  --font-serif:    'Cormorant Garamond', serif;
  --font-sans:     'DM Sans', sans-serif;

  /* ─── Typography Scale (6 sizes) ─────────────────────────────────────────── */
  --text-xs:       12px;   /* eyebrows, labels, badges */
  --text-sm:       14px;   /* body, inputs, buttons */
  --text-base:     16px;   /* default, nav titles */
  --text-lg:       20px;   /* subheadings */
  --text-xl:       28px;   /* page titles, large numbers */
  --text-2xl:      40px;   /* hero headings */

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

  /* ─── Line Heights ──────────────────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ─── Letter Spacing ────────────────────────────────────────────────────── */
  --tracking-tighter: -0.4px;
  --tracking-tight:   -0.2px;
  --tracking-normal:  0;
  --tracking-wide:    0.5px;
  --tracking-wider:   1.5px;
  --tracking-widest:  2px;

  /* ═══════════════════════════════════════════════════════════════════════════
     Semantic Typography Roles
     Use these for consistent styling across components
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─── Headings ─────────────────────────────────────────────────────────────── */
  --text-display:        var(--text-2xl);    /* 40px - Hero/login headings */
  --text-page-title:     var(--text-xl);     /* 28px - Page titles */
  --text-modal-title:    var(--text-xl);     /* 28px - Modal headers */
  --text-section-title:  var(--text-lg);     /* 20px - Section headers */
  --text-card-title:     var(--text-sm);     /* 14px - Card headers */

  /* ─── Stat Cards ───────────────────────────────────────────────────────────── */
  --text-stat-value:     var(--text-xl);     /* 28px - Large stat numbers */
  --text-stat-label:     var(--text-xs);     /* 12px - Uppercase labels */

  /* ─── Body & Content ───────────────────────────────────────────────────────── */
  --text-body:           var(--text-sm);     /* 14px - Main content */
  --text-body-small:     var(--text-xs);     /* 12px - Secondary content */

  /* ─── UI Elements ──────────────────────────────────────────────────────────── */
  --text-button:         var(--text-sm);     /* 14px - Button labels */
  --text-input:          var(--text-sm);     /* 14px - Form inputs */
  --text-label:          var(--text-xs);     /* 12px - Form labels */
  --text-caption:        var(--text-xs);     /* 12px - Metadata, timestamps */
  --text-badge:          var(--text-xs);     /* 12px - Status badges */
}