:root {
    /* Typography scale (Tailwind-compatible). Use var(--text-*) instead of
       hardcoded rem/px values. See AGENTS.md §7.4 for usage policy. */
    --text-3xs: 0.6875rem;     /* 11px */  --text-3xs--line-height: calc(0.9375 / 0.6875);
    --text-2xs: 0.625rem;      /* 10px */  --text-2xs--line-height: calc(0.875 / 0.625);
    --text-xs: 0.75rem;        /* 12px */  --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;       /* 14px */  --text-sm--line-height: calc(1.25 / 0.875);
    --text-md: 1rem;           /* 16px */  --text-md--line-height: calc(1.5 / 1);
    --text-base: 1rem;         /* 16px */  --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;       /* 18px */  --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;        /* 20px */  --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;        /* 24px */  --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;      /* 30px */  --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;       /* 36px */  --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;          /* 48px */  --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;       /* 60px */  --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;        /* 72px */  --text-7xl--line-height: 1;
    --text-8xl: 6rem;          /* 96px */  --text-8xl--line-height: 1;
    --text-9xl: 8rem;          /* 128px */ --text-9xl--line-height: 1;
}

/* Typography Utility Classes (Tailwind-compatible)
   Utility classes use !important so they always take precedence over component styles and ID-scoped selectors. */
.text-3xs  { font-size: var(--text-3xs) !important; line-height: var(--text-3xs--line-height) !important; }
.text-2xs  { font-size: var(--text-2xs) !important; line-height: var(--text-2xs--line-height) !important; }
.text-xs   { font-size: var(--text-xs) !important; line-height: var(--text-xs--line-height) !important; }
.text-sm   { font-size: var(--text-sm) !important; line-height: var(--text-sm--line-height) !important; }
.text-md,
.text-base { font-size: var(--text-base) !important; line-height: var(--text-base--line-height) !important; }
.text-lg   { font-size: var(--text-lg) !important; line-height: var(--text-lg--line-height) !important; }
.text-xl   { font-size: var(--text-xl) !important; line-height: var(--text-xl--line-height) !important; }
.text-2xl  { font-size: var(--text-2xl) !important; line-height: var(--text-2xl--line-height) !important; }
.text-3xl  { font-size: var(--text-3xl) !important; line-height: var(--text-3xl--line-height) !important; }
.text-4xl  { font-size: var(--text-4xl) !important; line-height: var(--text-4xl--line-height) !important; }
.text-5xl  { font-size: var(--text-5xl) !important; line-height: var(--text-5xl--line-height) !important; }
.text-6xl  { font-size: var(--text-6xl) !important; line-height: var(--text-6xl--line-height) !important; }
.text-7xl  { font-size: var(--text-7xl) !important; line-height: var(--text-7xl--line-height) !important; }
.text-8xl  { font-size: var(--text-8xl) !important; line-height: var(--text-8xl--line-height) !important; }
.text-9xl  { font-size: var(--text-9xl) !important; line-height: var(--text-9xl--line-height) !important; }