/* GENERATED from tokens.json by build.mjs — do not edit by hand. */

/* Primitives — never use these directly in components */
:root {
  --base-white: #FFFFFF;
  --base-black: #000000;
  --gray-50: #F5F7F8;
  --gray-100: #EDF0F2;
  --gray-200: #E2E6E9;
  --gray-300: #C9D0D5;
  --gray-400: #9AA4AB;
  --gray-500: #858F96;
  --gray-600: #646E76;
  --gray-700: #444C53;
  --gray-800: #2A3035;
  --gray-850: #1D2226;
  --gray-900: #161A1D;
  --gray-950: #0F1214;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-850: #162032;
  --slate-900: #0F172A;
  --slate-950: #020617;
  --zinc-50: #FAFAFA;
  --zinc-100: #F4F4F5;
  --zinc-200: #E4E4E7;
  --zinc-300: #D4D4D8;
  --zinc-400: #A1A1AA;
  --zinc-500: #71717A;
  --zinc-600: #52525B;
  --zinc-700: #3F3F46;
  --zinc-800: #27272A;
  --zinc-850: #1F1F22;
  --zinc-900: #18181B;
  --zinc-950: #09090B;
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-850: #1E1E1E;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-850: #221F1D;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-850: #8C1C1C;
  --red-900: #7F1D1D;
  --red-950: #450A0A;
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-850: #8B3112;
  --orange-900: #7C2D12;
  --orange-950: #431407;
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-850: #853A0F;
  --amber-900: #78350F;
  --amber-950: #451A03;
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-850: #7B4610;
  --yellow-900: #713F12;
  --yellow-950: #422006;
  --lime-50: #F7FEE7;
  --lime-100: #ECFCCB;
  --lime-200: #D9F99D;
  --lime-300: #BEF264;
  --lime-400: #A3E635;
  --lime-500: #84CC16;
  --lime-600: #65A30D;
  --lime-700: #4D7C0F;
  --lime-800: #3F6212;
  --lime-850: #3A5A13;
  --lime-900: #365314;
  --lime-950: #1A2E05;
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-850: #155C31;
  --green-900: #14532D;
  --green-950: #052E16;
  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --emerald-850: #065640;
  --emerald-900: #064E3B;
  --emerald-950: #022C22;
  --teal-50: #ECFAF8;
  --teal-100: #D8F6F2;
  --teal-200: #C0ECE6;
  --teal-300: #ABDCD7;
  --teal-400: #6ECDBB;
  --teal-500: #2DBA9D;
  --teal-600: #108970;
  --teal-700: #08715B;
  --teal-800: #055B4A;
  --teal-850: #095142;
  --teal-900: #0C483B;
  --teal-950: #072D26;
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-850: #16566C;
  --cyan-900: #164E63;
  --cyan-950: #083344;
  --sky-50: #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-800: #075985;
  --sky-850: #0A5179;
  --sky-900: #0C4A6E;
  --sky-950: #082F49;
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-850: #1E3D9C;
  --blue-900: #1E3A8A;
  --blue-950: #172554;
  --indigo-50: #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-850: #342F92;
  --indigo-900: #312E81;
  --indigo-950: #1E1B4B;
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-850: #531FA5;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;
  --purple-50: #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-200: #E9D5FF;
  --purple-300: #D8B4FE;
  --purple-400: #C084FC;
  --purple-500: #A855F7;
  --purple-600: #9333EA;
  --purple-700: #7E22CE;
  --purple-800: #6B21A8;
  --purple-850: #611F97;
  --purple-900: #581C87;
  --purple-950: #3B0764;
  --fuchsia-50: #FDF4FF;
  --fuchsia-100: #FAE8FF;
  --fuchsia-200: #F5D0FE;
  --fuchsia-300: #F0ABFC;
  --fuchsia-400: #E879F9;
  --fuchsia-500: #D946EF;
  --fuchsia-600: #C026D3;
  --fuchsia-700: #A21CAF;
  --fuchsia-800: #86198F;
  --fuchsia-850: #7B1A82;
  --fuchsia-900: #701A75;
  --fuchsia-950: #4A044E;
  --pink-50: #FDF2F8;
  --pink-100: #FCE7F3;
  --pink-200: #FBCFE8;
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --pink-700: #BE185D;
  --pink-800: #9D174D;
  --pink-850: #901848;
  --pink-900: #831843;
  --pink-950: #500724;
  --rose-50: #FFF1F2;
  --rose-100: #FFE4E6;
  --rose-200: #FECDD3;
  --rose-300: #FDA4AF;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --rose-700: #BE123C;
  --rose-800: #9F1239;
  --rose-850: #931338;
  --rose-900: #881337;
  --rose-950: #4C0519;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --space-0: 0px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;
  --space-60: 240px;
  --space-70: 280px;
  --space-90: 360px;
  --space-100: 400px;
  --space-140: 560px;
  --space-180: 720px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-2xl: 1536px;
  --type-display-lg-family: var(--font-sans);
  --type-display-lg-size: 48px;
  --type-display-lg-line: 56px;
  --type-display-lg-weight: 700;
  --type-display-lg-tracking: -0.022em;
  --type-display-md-family: var(--font-sans);
  --type-display-md-size: 40px;
  --type-display-md-line: 48px;
  --type-display-md-weight: 700;
  --type-display-md-tracking: -0.022em;
  --type-display-sm-family: var(--font-sans);
  --type-display-sm-size: 32px;
  --type-display-sm-line: 40px;
  --type-display-sm-weight: 700;
  --type-display-sm-tracking: -0.022em;
  --type-headline-lg-family: var(--font-sans);
  --type-headline-lg-size: 28px;
  --type-headline-lg-line: 36px;
  --type-headline-lg-weight: 600;
  --type-headline-lg-tracking: -0.022em;
  --type-headline-md-family: var(--font-sans);
  --type-headline-md-size: 24px;
  --type-headline-md-line: 32px;
  --type-headline-md-weight: 600;
  --type-headline-md-tracking: -0.02em;
  --type-headline-sm-family: var(--font-sans);
  --type-headline-sm-size: 20px;
  --type-headline-sm-line: 28px;
  --type-headline-sm-weight: 600;
  --type-headline-sm-tracking: -0.017em;
  --type-title-lg-family: var(--font-sans);
  --type-title-lg-size: 18px;
  --type-title-lg-line: 24px;
  --type-title-lg-weight: 600;
  --type-title-lg-tracking: -0.014em;
  --type-title-md-family: var(--font-sans);
  --type-title-md-size: 16px;
  --type-title-md-line: 24px;
  --type-title-md-weight: 600;
  --type-title-md-tracking: -0.011em;
  --type-title-sm-family: var(--font-sans);
  --type-title-sm-size: 14px;
  --type-title-sm-line: 20px;
  --type-title-sm-weight: 600;
  --type-title-sm-tracking: -0.006em;
  --type-body-lg-family: var(--font-sans);
  --type-body-lg-size: 18px;
  --type-body-lg-line: 28px;
  --type-body-lg-weight: 400;
  --type-body-lg-tracking: -0.014em;
  --type-body-md-family: var(--font-sans);
  --type-body-md-size: 16px;
  --type-body-md-line: 24px;
  --type-body-md-weight: 400;
  --type-body-md-tracking: -0.011em;
  --type-body-sm-family: var(--font-sans);
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: -0.006em;
  --type-body-xs-family: var(--font-sans);
  --type-body-xs-size: 12px;
  --type-body-xs-line: 16px;
  --type-body-xs-weight: 400;
  --type-body-xs-tracking: 0;
  --type-label-lg-family: var(--font-sans);
  --type-label-lg-size: 14px;
  --type-label-lg-line: 20px;
  --type-label-lg-weight: 500;
  --type-label-lg-tracking: -0.006em;
  --type-label-md-family: var(--font-sans);
  --type-label-md-size: 13px;
  --type-label-md-line: 20px;
  --type-label-md-weight: 500;
  --type-label-md-tracking: -0.003em;
  --type-label-sm-family: var(--font-sans);
  --type-label-sm-size: 12px;
  --type-label-sm-line: 16px;
  --type-label-sm-weight: 500;
  --type-label-sm-tracking: 0;
  --type-label-xs-family: var(--font-sans);
  --type-label-xs-size: 11px;
  --type-label-xs-line: 16px;
  --type-label-xs-weight: 600;
  --type-label-xs-tracking: 0.005em;
  --type-code-md-family: var(--font-mono);
  --type-code-md-size: 13px;
  --type-code-md-line: 20px;
  --type-code-md-weight: 400;
  --type-code-md-tracking: 0;
  --type-code-sm-family: var(--font-mono);
  --type-code-sm-size: 12px;
  --type-code-sm-line: 16px;
  --type-code-sm-weight: 400;
  --type-code-sm-tracking: 0;
}

/* Semantic tokens — use these. DARK is the default; light via data-theme="light",
   or data-theme="system" to follow the operating system. */
:root, [data-theme="dark"] {
  --color-bg-app: var(--gray-950);
  --color-bg-surface: var(--gray-900);
  --color-bg-elevated: var(--gray-850);
  --color-bg-inverse: var(--gray-100);
  --color-border-subtle: var(--gray-800);
  --color-border-strong: var(--gray-600);
  --color-border-hover: var(--gray-400);
  --color-border-toast: var(--teal-800);
  --color-focus-ring: var(--gray-400);
  --color-focus-ring-halo: color-mix(in srgb, var(--gray-400) 50%, transparent);
  --color-text-primary: var(--gray-100);
  --color-text-secondary: var(--gray-400);
  --color-text-disabled: var(--gray-600);
  --color-text-inverse: var(--gray-950);
  --color-text-inverse-secondary: var(--gray-600);
  --color-bg-hover: color-mix(in srgb, var(--base-white) 7%, transparent);
  --color-bg-pressed: color-mix(in srgb, var(--base-white) 12%, transparent);
  --color-bg-disabled: var(--gray-850);
  --color-accent: var(--teal-500);
  --color-accent-hover: var(--teal-400);
  --color-accent-pressed: var(--teal-300);
  --color-on-accent: var(--teal-950);
  --color-accent-soft: var(--teal-950);
  --color-accent-soft-text: var(--teal-300);
  --color-danger: var(--red-400);
  --color-danger-solid: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-danger-pressed: var(--red-800);
  --color-on-danger: var(--base-white);
  --color-warning: var(--amber-400);
  --color-status-online: var(--green-500);
  --color-status-away: var(--amber-400);
  --color-status-dnd: var(--red-400);
  --color-status-offline: var(--gray-500);
  --color-status-speaking: var(--teal-500);
  --color-scrim: color-mix(in srgb, var(--base-black) 70%, transparent);
  --color-on-avatar: var(--base-white);
  --color-avatar-1: var(--blue-600);
  --color-avatar-2: var(--indigo-600);
  --color-avatar-3: var(--violet-600);
  --color-avatar-4: var(--fuchsia-700);
  --color-avatar-5: var(--pink-600);
  --color-avatar-6: var(--orange-700);
  --color-avatar-7: var(--cyan-700);
  --color-avatar-8: var(--emerald-700);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,.5);
}
[data-theme="light"] {
  --color-bg-app: var(--base-white);
  --color-bg-surface: var(--gray-50);
  --color-bg-elevated: var(--base-white);
  --color-bg-inverse: var(--gray-900);
  --color-border-subtle: var(--gray-200);
  --color-border-strong: var(--gray-500);
  --color-border-hover: var(--gray-600);
  --color-border-toast: var(--teal-300);
  --color-focus-ring: var(--gray-600);
  --color-focus-ring-halo: color-mix(in srgb, var(--gray-600) 50%, transparent);
  --color-text-primary: var(--gray-950);
  --color-text-secondary: var(--gray-600);
  --color-text-disabled: var(--gray-400);
  --color-text-inverse: var(--base-white);
  --color-text-inverse-secondary: var(--gray-400);
  --color-bg-hover: color-mix(in srgb, var(--gray-950) 5%, transparent);
  --color-bg-pressed: color-mix(in srgb, var(--gray-950) 10%, transparent);
  --color-bg-disabled: var(--gray-100);
  --color-accent: var(--teal-700);
  --color-accent-hover: var(--teal-800);
  --color-accent-pressed: var(--teal-900);
  --color-on-accent: var(--base-white);
  --color-accent-soft: var(--teal-100);
  --color-accent-soft-text: var(--teal-800);
  --color-danger: var(--red-600);
  --color-danger-solid: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-danger-pressed: var(--red-800);
  --color-on-danger: var(--base-white);
  --color-warning: var(--amber-700);
  --color-status-online: var(--green-600);
  --color-status-away: var(--amber-400);
  --color-status-dnd: var(--red-600);
  --color-status-offline: var(--gray-400);
  --color-status-speaking: var(--teal-600);
  --color-scrim: color-mix(in srgb, var(--gray-950) 50%, transparent);
  --color-on-avatar: var(--base-white);
  --color-avatar-1: var(--blue-600);
  --color-avatar-2: var(--indigo-600);
  --color-avatar-3: var(--violet-600);
  --color-avatar-4: var(--fuchsia-700);
  --color-avatar-5: var(--pink-600);
  --color-avatar-6: var(--orange-700);
  --color-avatar-7: var(--cyan-700);
  --color-avatar-8: var(--emerald-700);
  --shadow-elevated: 0 8px 24px rgba(16,24,32,.12);
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --color-bg-app: var(--base-white);
    --color-bg-surface: var(--gray-50);
    --color-bg-elevated: var(--base-white);
    --color-bg-inverse: var(--gray-900);
    --color-border-subtle: var(--gray-200);
    --color-border-strong: var(--gray-500);
    --color-border-hover: var(--gray-600);
    --color-border-toast: var(--teal-300);
    --color-focus-ring: var(--gray-600);
    --color-focus-ring-halo: color-mix(in srgb, var(--gray-600) 50%, transparent);
    --color-text-primary: var(--gray-950);
    --color-text-secondary: var(--gray-600);
    --color-text-disabled: var(--gray-400);
    --color-text-inverse: var(--base-white);
    --color-text-inverse-secondary: var(--gray-400);
    --color-bg-hover: color-mix(in srgb, var(--gray-950) 5%, transparent);
    --color-bg-pressed: color-mix(in srgb, var(--gray-950) 10%, transparent);
    --color-bg-disabled: var(--gray-100);
    --color-accent: var(--teal-700);
    --color-accent-hover: var(--teal-800);
    --color-accent-pressed: var(--teal-900);
    --color-on-accent: var(--base-white);
    --color-accent-soft: var(--teal-100);
    --color-accent-soft-text: var(--teal-800);
    --color-danger: var(--red-600);
    --color-danger-solid: var(--red-600);
    --color-danger-hover: var(--red-700);
    --color-danger-pressed: var(--red-800);
    --color-on-danger: var(--base-white);
    --color-warning: var(--amber-700);
    --color-status-online: var(--green-600);
    --color-status-away: var(--amber-400);
    --color-status-dnd: var(--red-600);
    --color-status-offline: var(--gray-400);
    --color-status-speaking: var(--teal-600);
    --color-scrim: color-mix(in srgb, var(--gray-950) 50%, transparent);
    --color-on-avatar: var(--base-white);
    --color-avatar-1: var(--blue-600);
    --color-avatar-2: var(--indigo-600);
    --color-avatar-3: var(--violet-600);
    --color-avatar-4: var(--fuchsia-700);
    --color-avatar-5: var(--pink-600);
    --color-avatar-6: var(--orange-700);
    --color-avatar-7: var(--cyan-700);
    --color-avatar-8: var(--emerald-700);
    --shadow-elevated: 0 8px 24px rgba(16,24,32,.12);
  }
}

/* Semantic spacing, radius, sizes and breakpoints — same in both themes */
:root {
  --space-page-margin: var(--space-4);
  --space-container-padding: var(--space-4);
  --space-overlay-padding: var(--space-6);
  --space-stack-gap: var(--space-4);
  --space-stack-gap-condensed: var(--space-2);
  --space-button-padding-sm: var(--space-3);
  --space-button-padding-md: var(--space-4);
  --space-button-padding-lg: var(--space-5);
  --space-field-padding-sm: var(--space-2);
  --space-field-padding-md: var(--space-3);
  --space-field-padding-lg: var(--space-4);
  --space-control-gap: var(--space-2);
  --space-list-gap: var(--space-0-5);
  --radius-control: var(--radius-xl);
  --radius-control-inner: var(--radius-lg);
  --radius-container: var(--radius-2xl);
  --radius-sheet: var(--radius-3xl);
  --radius-round: var(--radius-full);
  --radius-checkbox: var(--radius-sm);
  --size-control-dense: var(--space-8);
  --size-control-default: var(--space-9);
  --size-control-touch: var(--space-12);
  --size-touch-target-min: var(--space-12);
  --size-rail: var(--space-18);
  --size-list-medium: var(--space-60);
  --size-list-expanded: var(--space-70);
  --size-panel: var(--space-70);
  --size-content-max: var(--space-180);
  --size-icon-sm: var(--space-4);
  --size-icon-md: var(--space-5);
  --size-icon-lg: var(--space-6);
  --size-avatar-sm: var(--space-6);
  --size-avatar-md: var(--space-8);
  --size-avatar-lg: var(--space-10);
  --size-avatar-xl: var(--space-16);
  --size-avatar-2xl: var(--space-24);
  --size-menu-min: var(--space-60);
  --size-modal-sm: var(--space-100);
  --size-modal-md: var(--space-140);
  --size-toast: var(--space-70);
  --size-control-call: var(--space-11);
  --breakpoint-medium: var(--breakpoint-md);
  --breakpoint-expanded: var(--breakpoint-lg);
  --breakpoint-wide: var(--breakpoint-2xl);
}

/* Typography roles */
.type-display-lg { font-family: var(--type-display-lg-family); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); font-weight: var(--type-display-lg-weight); letter-spacing: var(--type-display-lg-tracking); }
.type-display-md { font-family: var(--type-display-md-family); font-size: var(--type-display-md-size); line-height: var(--type-display-md-line); font-weight: var(--type-display-md-weight); letter-spacing: var(--type-display-md-tracking); }
.type-display-sm { font-family: var(--type-display-sm-family); font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-line); font-weight: var(--type-display-sm-weight); letter-spacing: var(--type-display-sm-tracking); }
.type-headline-lg { font-family: var(--type-headline-lg-family); font-size: var(--type-headline-lg-size); line-height: var(--type-headline-lg-line); font-weight: var(--type-headline-lg-weight); letter-spacing: var(--type-headline-lg-tracking); }
.type-headline-md { font-family: var(--type-headline-md-family); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); font-weight: var(--type-headline-md-weight); letter-spacing: var(--type-headline-md-tracking); }
.type-headline-sm { font-family: var(--type-headline-sm-family); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: var(--type-headline-sm-weight); letter-spacing: var(--type-headline-sm-tracking); }
.type-title-lg { font-family: var(--type-title-lg-family); font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--type-title-lg-weight); letter-spacing: var(--type-title-lg-tracking); }
.type-title-md { font-family: var(--type-title-md-family); font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--type-title-md-weight); letter-spacing: var(--type-title-md-tracking); }
.type-title-sm { font-family: var(--type-title-sm-family); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--type-title-sm-weight); letter-spacing: var(--type-title-sm-tracking); }
.type-body-lg { font-family: var(--type-body-lg-family); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); font-weight: var(--type-body-lg-weight); letter-spacing: var(--type-body-lg-tracking); }
.type-body-md { font-family: var(--type-body-md-family); font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); font-weight: var(--type-body-md-weight); letter-spacing: var(--type-body-md-tracking); }
.type-body-sm { font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-weight); letter-spacing: var(--type-body-sm-tracking); }
.type-body-xs { font-family: var(--type-body-xs-family); font-size: var(--type-body-xs-size); line-height: var(--type-body-xs-line); font-weight: var(--type-body-xs-weight); letter-spacing: var(--type-body-xs-tracking); }
.type-label-lg { font-family: var(--type-label-lg-family); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); font-weight: var(--type-label-lg-weight); letter-spacing: var(--type-label-lg-tracking); }
.type-label-md { font-family: var(--type-label-md-family); font-size: var(--type-label-md-size); line-height: var(--type-label-md-line); font-weight: var(--type-label-md-weight); letter-spacing: var(--type-label-md-tracking); }
.type-label-sm { font-family: var(--type-label-sm-family); font-size: var(--type-label-sm-size); line-height: var(--type-label-sm-line); font-weight: var(--type-label-sm-weight); letter-spacing: var(--type-label-sm-tracking); }
.type-label-xs { font-family: var(--type-label-xs-family); font-size: var(--type-label-xs-size); line-height: var(--type-label-xs-line); font-weight: var(--type-label-xs-weight); letter-spacing: var(--type-label-xs-tracking); }
.type-code-md { font-family: var(--type-code-md-family); font-size: var(--type-code-md-size); line-height: var(--type-code-md-line); font-weight: var(--type-code-md-weight); letter-spacing: var(--type-code-md-tracking); }
.type-code-sm { font-family: var(--type-code-sm-family); font-size: var(--type-code-sm-size); line-height: var(--type-code-sm-line); font-weight: var(--type-code-sm-weight); letter-spacing: var(--type-code-sm-tracking); }

/* Modifiers */
.caps { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; } /* unread states only (list rows) — see ux-ui/typography.md */