:root {
  /* ─── Font Family ─────────────────────────────────────────── */
  --font-display: 'Barlow Semi Condensed', sans-serif;  /* headings, nav, buttons, labels, badges */
  --font-body:    'Outfit', sans-serif;                  /* body copy, descriptions, inputs, metadata */
  --font-sans:    var(--font-body);                      /* legacy alias — resolves to Outfit */

  /* ─── Font Sizes (4px base) ──────────────────────────────── */
  --text-micro: 0.625rem;  /* 10px — CSS var names, micro labels */
  --text-xs:    0.75rem;   /* 12px — captions, metadata, badges */
  --text-sm:    0.875rem;  /* 14px — body text default */
  --text-base:  1rem;      /* 16px — slightly larger body */
  --text-lg:    1.125rem;  /* 18px — subsection headings */
  --text-xl:    1.25rem;   /* 20px — card/modal titles */
  --text-2xl:   1.5rem;    /* 24px — section titles */
  --text-4xl:   2.25rem;   /* 36px — page headings */

  /* ─── Font Weights ───────────────────────────────────────── */
  --weight-normal:   400;  /* Body text */
  --weight-medium:   500;  /* Subtle emphasis */
  --weight-semibold: 600;  /* Secondary headings */
  --weight-bold:     700;  /* Labels, buttons, navigation */
  --weight-black:    900;  /* Page/section headings */

  /* ─── Line Heights ───────────────────────────────────────── */
  --leading-tight:   1.1;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ─── Letter Spacing ─────────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.12em;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--brand-5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display font applied to all native heading elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Buttons and form labels always use display font */
button, [role="button"] {
  font-family: var(--font-display);
}

/* ─── Custom scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }