/*
 * Thrive Design Tokens
 * Single source of truth for all Thrive-branded HTML/CSS.
 * Include this file in any HTML doc to get consistent branding.
 *
 * Usage:
 *   <link rel="stylesheet" href="path/to/thrive-tokens.css">
 *
 * Source: Thrive Brand Guide Rev. 11/25/2025
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* ─────────────────────────────────────────────
   COLOR PALETTES
   All colors expressed as HSL triplets (no hsl() wrapper)
   so they can be composed with alpha: hsl(var(--blue-500) / 0.5)
   ───────────────────────────────────────────── */
:root {
  /* Thrive Blue — brand primary (#293D74)
     Use for: page headers, nav backgrounds, hero sections, headings */
  --blue-50:  225 50% 97%;
  --blue-100: 225 50% 92%;
  --blue-200: 225 50% 82%;
  --blue-300: 225 50% 68%;
  --blue-400: 225 50% 52%;
  --blue-500: 225 50% 32%;   /* #293D74 — brand blue */
  --blue-600: 225 55% 25%;
  --blue-700: 225 60% 18%;
  --blue-800: 225 65% 12%;
  --blue-900: 225 70% 7%;

  /* Medium Blue — interactive (#0F82C6)
     Use for: links, buttons, hover states, CTAs */
  --sky-50:  202 86% 97%;
  --sky-100: 202 86% 92%;
  --sky-200: 202 86% 82%;
  --sky-300: 202 86% 68%;
  --sky-400: 202 86% 55%;
  --sky-500: 202 86% 42%;   /* #0F82C6 — medium blue */
  --sky-600: 202 86% 34%;
  --sky-700: 202 86% 24%;
  --sky-800: 202 86% 15%;
  --sky-900: 202 86% 8%;

  /* Gold — accent (#BD9B2F)
     Use for: callout borders, badges, highlights, "tip" blocks */
  --gold-50:  46 60% 97%;
  --gold-100: 46 60% 92%;
  --gold-200: 46 60% 82%;
  --gold-300: 46 60% 70%;
  --gold-400: 46 60% 57%;
  --gold-500: 46 60% 46%;   /* #BD9B2F — gold */
  --gold-600: 46 65% 37%;
  --gold-700: 46 70% 27%;
  --gold-800: 46 75% 18%;
  --gold-900: 46 80% 10%;

  /* Green — accent/success (#9BCC12)
     Use for: success states, "done" badges, positive indicators */
  --green-50:  76 84% 97%;
  --green-100: 76 84% 89%;
  --green-200: 76 84% 76%;
  --green-300: 76 84% 60%;
  --green-400: 76 84% 50%;
  --green-500: 76 84% 44%;   /* #9BCC12 — brand green */
  --green-600: 76 77% 32%;
  --green-700: 76 77% 22%;
  --green-800: 76 77% 14%;
  --green-900: 76 77% 7%;

  /* Gray — neutral (#B1B3B6 is brand gray, sits at ~400)
     Use for: body text, borders, muted UI */
  --gray-50:  220 20% 98%;
  --gray-100: 220 14% 96%;
  --gray-200: 220 13% 91%;
  --gray-300: 220 12% 84%;
  --gray-400: 220 8%  70%;   /* #B1B3B6 — brand gray */
  --gray-500: 220 9%  54%;
  --gray-600: 220 12% 38%;
  --gray-700: 220 16% 26%;
  --gray-800: 220 25% 17%;
  --gray-900: 220 32% 11%;

  /* Red — destructive / error */
  --red-50:  356 100% 97%;
  --red-100: 356 90%  93%;
  --red-200: 356 80%  84%;
  --red-300: 356 70%  72%;
  --red-400: 356 60%  60%;
  --red-500: 356 50%  50%;

  /* Amber — warning */
  --amber-500: 38 92% 50%;

  /* ─────────────────────────────────────────────
     SEMANTIC TOKENS
     These are what you use in component CSS.
     Swap these to re-theme without touching components.
     ───────────────────────────────────────────── */

  /* Surfaces */
  --color-background:         hsl(var(--gray-50));
  --color-surface:            hsl(0 0% 100%);
  --color-surface-raised:     hsl(var(--gray-100));
  --color-surface-overlay:    hsl(var(--blue-50));

  /* Navigation / Header */
  --color-nav-bg:             hsl(var(--blue-500));     /* #293D74 navy */
  --color-nav-fg:             hsl(0 0% 100%);
  --color-nav-hover:          hsl(var(--sky-500));

  /* Sidebar */
  --color-sidebar-bg:         hsl(var(--blue-700));
  --color-sidebar-fg:         hsl(var(--gray-100));
  --color-sidebar-active:     hsl(var(--sky-500));

  /* Footer */
  --color-footer-bg:          hsl(var(--blue-600));
  --color-footer-fg:          hsl(var(--gray-100));

  /* Primary interactive (buttons, links, focus rings) */
  --color-primary:            hsl(var(--sky-500));      /* #0F82C6 medium blue */
  --color-primary-hover:      hsl(var(--sky-600));
  --color-primary-fg:         hsl(0 0% 100%);

  /* Brand accent (callouts, badges, highlights) */
  --color-accent:             hsl(var(--gold-500));     /* #BD9B2F gold */
  --color-accent-subtle:      hsl(var(--gold-100));
  --color-accent-fg:          hsl(var(--gold-800));

  /* Headings */
  --color-heading:            hsl(var(--blue-500));

  /* Body text */
  --color-text:               hsl(var(--gray-800));
  --color-text-muted:         hsl(var(--gray-500));
  --color-text-subtle:        hsl(var(--gray-400));

  /* Borders */
  --color-border:             hsl(var(--gray-200));
  --color-border-strong:      hsl(var(--gray-300));

  /* Status */
  --color-success:            hsl(var(--green-600));
  --color-success-subtle:     hsl(var(--green-100));
  --color-success-fg:         hsl(var(--green-800));

  --color-warning:            hsl(var(--amber-500));
  --color-warning-subtle:     hsl(46 60% 92%);
  --color-warning-fg:         hsl(46 80% 20%);

  --color-danger:             hsl(var(--red-500));
  --color-danger-subtle:      hsl(var(--red-100));
  --color-danger-fg:          hsl(var(--red-500));

  --color-info:               hsl(var(--sky-500));
  --color-info-subtle:        hsl(var(--sky-50));
  --color-info-fg:            hsl(var(--sky-700));

  /* Code blocks */
  --color-code-bg:            hsl(var(--blue-900));
  --color-code-fg:            hsl(var(--sky-200));
  --color-code-inline-bg:     hsl(var(--gray-100));
  --color-code-inline-fg:     hsl(var(--blue-500));

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────── */
  --font-sans:    'Roboto', Arial, system-ui, sans-serif;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ─────────────────────────────────────────────
     SPACING & LAYOUT
     ───────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.25rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px hsl(var(--blue-900) / 0.06);
  --shadow:    0 1px 3px hsl(var(--blue-900) / 0.10), 0 1px 2px hsl(var(--blue-900) / 0.06);
  --shadow-md: 0 4px 6px hsl(var(--blue-900) / 0.08), 0 2px 4px hsl(var(--blue-900) / 0.06);
  --shadow-lg: 0 10px 15px hsl(var(--blue-900) / 0.10), 0 4px 6px hsl(var(--blue-900) / 0.05);

  --max-content: 72rem;   /* 1152px — max page content width */
  --nav-height:  3.5rem;
}

/* ─────────────────────────────────────────────
   BASE STYLES
   Applied globally when this stylesheet is loaded.
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY BASE
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); margin-top: var(--space-10); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); margin-top: var(--space-8); }
h4 { font-size: var(--text-xl);  margin-bottom: var(--space-3); margin-top: var(--space-6); }
h5 { font-size: var(--text-lg);  margin-bottom: var(--space-3); margin-top: var(--space-5); }
h6 { font-size: var(--text-base); margin-bottom: var(--space-2); margin-top: var(--space-4); color: var(--color-text-muted); }

p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}
li { margin-bottom: var(--space-1); }

strong { font-weight: var(--weight-bold); }
em     { font-style: italic; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-inline-bg);
  color: var(--color-code-inline-fg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-6) 0;
  background: var(--color-accent-subtle);
  color: var(--color-accent-fg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p { margin-bottom: 0; }

/* ─────────────────────────────────────────────
   PAGE LAYOUT COMPONENTS
   ───────────────────────────────────────────── */

/* Header / Nav */
.thrive-header {
  background: var(--color-nav-bg);
  color: var(--color-nav-fg);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.thrive-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
}

.thrive-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.thrive-wordmark {
  color: hsl(0 0% 100%);
}

.thrive-nav-divider {
  color: hsl(var(--sky-400));
  font-weight: var(--weight-light);
}

.thrive-nav-section {
  color: hsl(var(--sky-200));
  font-weight: var(--weight-regular);
}

.thrive-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.thrive-nav-links a {
  color: hsl(var(--gray-200));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background 0.15s, color 0.15s;
}
.thrive-nav-links a:hover,
.thrive-nav-links a.active {
  background: hsl(var(--blue-400) / 0.4);
  color: hsl(0 0% 100%);
  text-decoration: none;
}

/* Page wrapper */
.thrive-page {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

/* Sidebar navigation */
.thrive-sidebar {
  width: 14rem;
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-fg);
  padding: var(--space-6) 0;
  min-height: calc(100vh - var(--nav-height));
}

.thrive-sidebar-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
}

.thrive-sidebar-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--sky-300));
  margin-bottom: var(--space-2);
}

.thrive-sidebar-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.thrive-sidebar-links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: hsl(var(--gray-300));
  transition: background 0.15s, color 0.15s;
}
.thrive-sidebar-links a:hover,
.thrive-sidebar-links a.active {
  background: hsl(0 0% 100% / 0.08);
  color: hsl(0 0% 100%);
  text-decoration: none;
}
.thrive-sidebar-links a.active {
  background: var(--color-sidebar-active);
  color: hsl(0 0% 100%);
}

/* Main content area */
.thrive-main {
  flex: 1;
  padding: var(--space-10) var(--space-8);
  max-width: 56rem;
  min-width: 0;
}

/* Full-width content (no sidebar) */
.thrive-content-centered {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
}

/* Footer */
.thrive-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-fg);
  padding: var(--space-6) var(--space-8);
  font-size: var(--text-sm);
  text-align: center;
}
.thrive-footer a { color: hsl(var(--sky-200)); }

/* ─────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin: 0;
}

.card-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Card variants */
.card-raised {
  box-shadow: var(--shadow-md);
}

.card-accent {
  border-left: 4px solid var(--color-accent);
}

.card-primary {
  background: var(--color-nav-bg);
  color: hsl(0 0% 100%);
  border-color: transparent;
}
.card-primary .card-title { color: hsl(0 0% 100%); }
.card-primary .card-description { color: hsl(var(--sky-200)); }
.card-primary .card-header,
.card-primary .card-footer {
  border-color: hsl(var(--blue-400) / 0.4);
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: var(--color-primary-fg);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-info-subtle);
  text-decoration: none;
  color: var(--color-primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-surface-raised);
  text-decoration: none;
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color: hsl(0 0% 100%);
  border-color: var(--color-danger);
}
.btn-danger:hover {
  background: hsl(var(--red-400));
  text-decoration: none;
  color: hsl(0 0% 100%);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}
.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* ─────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1em var(--space-2);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.badge-primary  { background: var(--color-info-subtle);    color: var(--color-info-fg); }
.badge-accent   { background: var(--color-accent-subtle);  color: var(--color-accent-fg); }
.badge-success  { background: var(--color-success-subtle); color: var(--color-success-fg); }
.badge-warning  { background: var(--color-warning-subtle); color: var(--color-warning-fg); }
.badge-danger   { background: var(--color-danger-subtle);  color: var(--color-danger-fg); }
.badge-neutral  { background: hsl(var(--gray-100));        color: hsl(var(--gray-600)); }

/* ─────────────────────────────────────────────
   CALLOUT / ALERT BLOCKS
   ───────────────────────────────────────────── */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin: var(--space-6) 0;
  border: 1px solid transparent;
}

.callout-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
  line-height: 1.5;
}

.callout-body { flex: 1; min-width: 0; }
.callout-title {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}
.callout p:last-child { margin-bottom: 0; }

.callout-info {
  background: var(--color-info-subtle);
  border-color: hsl(var(--sky-200));
  color: var(--color-info-fg);
}
.callout-info .callout-title { color: var(--color-info); }

.callout-tip {
  background: var(--color-accent-subtle);
  border-color: hsl(var(--gold-300));
  color: var(--color-accent-fg);
}
.callout-tip .callout-title { color: hsl(var(--gold-600)); }

.callout-success {
  background: var(--color-success-subtle);
  border-color: hsl(var(--green-300));
  color: var(--color-success-fg);
}
.callout-success .callout-title { color: var(--color-success); }

.callout-warning {
  background: var(--color-warning-subtle);
  border-color: hsl(var(--amber-500) / 0.4);
  color: var(--color-warning-fg);
}
.callout-warning .callout-title { color: var(--color-warning); }

.callout-danger {
  background: var(--color-danger-subtle);
  border-color: hsl(var(--red-200));
  color: var(--color-danger-fg);
}
.callout-danger .callout-title { color: var(--color-danger); }

/* ─────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead {
  background: var(--color-nav-bg);
  color: hsl(0 0% 100%);
}
thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--sky-200));
}

tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--color-surface-raised); }

td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

/* ─────────────────────────────────────────────
   HERO / PAGE HEADER BANNER
   ───────────────────────────────────────────── */
.page-hero {
  background: var(--color-nav-bg);
  color: hsl(0 0% 100%);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}

.page-hero h1 {
  color: hsl(0 0% 100%);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.page-hero p {
  color: hsl(var(--sky-200));
  font-size: var(--text-lg);
  max-width: 40rem;
  margin: 0 auto var(--space-6);
}

/* ─────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb li + li::before {
  content: '/';
  color: var(--color-text-subtle);
}
.breadcrumb a { color: var(--color-primary); }

/* ─────────────────────────────────────────────
   DEFINITION / METADATA LISTS
   ───────────────────────────────────────────── */
.dl-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-4) 0;
}
.dl-grid dt {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.dl-grid dd {
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────
   SECTION DIVIDER
   ───────────────────────────────────────────── */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .thrive-page { flex-direction: column; }
  .thrive-sidebar { width: 100%; min-height: auto; padding: var(--space-4) 0; }
  .thrive-main { padding: var(--space-6) var(--space-4); }
  .thrive-nav-links { display: none; }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}