:root {
  /* ============================================
     PRIMITIVES — raw typography values.
     Never reference these directly in components.
     Use the semantic tokens below instead.
     ============================================ */

  /* Font families */
  --font-serif: "Sentient", Georgia, serif;
  --font-sans:  "Satoshi", -apple-system, sans-serif;

  /* Size scale */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  30px;
  --font-size-3xl:  36px;

  /* Weight — confirm exact cuts available in Sentient/Satoshi */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Line height */
  --line-height-tight:   1.2;  /* headings */
  --line-height-snug:    1.35; /* subheadings */
  --line-height-normal:  1.5;  /* UI text, labels */
  --line-height-relaxed: 1.7;  /* body paragraphs */


  /* ============================================
     SEMANTIC — purpose-based text styles.
     Components reference these, never the raw
     primitives above.
     ============================================ */

  /* Headings — Sentient */
  --text-display-font:        var(--font-serif);
  --text-display-size:        var(--font-size-3xl);
  --text-display-weight:      var(--font-weight-regular);
  --text-display-line-height: var(--line-height-tight);

  --text-h1-font:        var(--font-serif);
  --text-h1-size:        var(--font-size-2xl);
  --text-h1-weight:      var(--font-weight-regular);
  --text-h1-line-height: var(--line-height-tight);

  --text-h2-font:        var(--font-serif);
  --text-h2-size:        var(--font-size-xl);
  --text-h2-weight:      var(--font-weight-regular);
  --text-h2-line-height: var(--line-height-tight);

  --text-h3-font:        var(--font-serif);
  --text-h3-size:        var(--font-size-lg);
  --text-h3-weight:      var(--font-weight-medium);
  --text-h3-line-height: var(--line-height-snug);

  /* Body — Satoshi */
  --text-body-font:        var(--font-sans);
  --text-body-size:        var(--font-size-base);
  --text-body-weight:      var(--font-weight-regular);
  --text-body-line-height: var(--line-height-relaxed);

  --text-body-secondary-font:        var(--font-sans);
  --text-body-secondary-size:        var(--font-size-sm);
  --text-body-secondary-weight:      var(--font-weight-regular);
  --text-body-secondary-line-height: var(--line-height-relaxed);

  --text-caption-font:        var(--font-sans);
  --text-caption-size:        var(--font-size-xs);
  --text-caption-weight:      var(--font-weight-regular);
  --text-caption-line-height: var(--line-height-normal);

  --text-button-font:        var(--font-sans);
  --text-button-size:        var(--font-size-sm);
  --text-button-weight:      var(--font-weight-medium);
  --text-button-line-height: var(--line-height-normal);

  --text-nav-font:        var(--font-sans);
  --text-nav-size:        var(--font-size-sm);
  --text-nav-weight:      var(--font-weight-medium);
  --text-nav-line-height: var(--line-height-normal);
}


/* ============================================
   OPTIONAL — ready-to-use utility classes,
   built from the semantic tokens above.
   Skip these if you'd rather apply the custom
   properties directly in your components.
   ============================================ */

.text-display {
  font-family: var(--text-display-font);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-line-height);
}

.text-h1 {
  font-family: var(--text-h1-font);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
}

.text-h2 {
  font-family: var(--text-h2-font);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
}

.text-h3 {
  font-family: var(--text-h3-font);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
}

.text-body {
  font-family: var(--text-body-font);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
}

.text-body-secondary {
  font-family: var(--text-body-secondary-font);
  font-size: var(--text-body-secondary-size);
  font-weight: var(--text-body-secondary-weight);
  line-height: var(--text-body-secondary-line-height);
}

.text-caption {
  font-family: var(--text-caption-font);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-line-height);
}

.text-button {
  font-family: var(--text-button-font);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-line-height);
}

.text-nav {
  font-family: var(--text-nav-font);
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-line-height);
}