@repobit/dex-system-design 0.23.95 → 0.23.97

package/src/blog/tokens.css

@@ -0,0 +1,1512 @@
+/* AUTO-GENERATED — edit tokens/*.js and run npm run build:tokens */
+:root {
+/* ================================
+     CORE TYPOGRAPHY TOKENS
+     ================================ */
+
+--typography-fontFamily-sans: "IBM Plex Sans", system-ui, -apple-system,
+  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+--typography-fontFamily-sans-condensed: "IBM Plex Sans Condensed", system-ui,
+  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+  sans-serif;
+--typography-fontFamily-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular,
+  Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+--typography-fontSize-xxs: 0.6875rem; /* 11px */
+--typography-fontSize-xs: 0.75rem; /* 12px */
+--typography-fontSize-sm: 0.875rem; /* 14px */
+--typography-fontSize-base: 1rem; /* 16px */
+--typography-fontSize-lg: 1.125rem; /* 18px */
+--typography-fontSize-xl: 1.25rem; /* 20px */
+--typography-fontSize-2xl: 1.5rem; /* 24px */
+--typography-fontSize-3xl: 2rem; /* 32px */
+--typography-fontSize-4xl: 2.25rem; /* 36px */
+--typography-fontSize-5xl: 3rem; /* 48px */
+--typography-fontSize-6xl: 3.75rem; /* 60px */
+--typography-fontSize-7xl: 4.5rem; /* 72px */
+--typography-fontSize-8xl: 6rem; /* 96px */
+--typography-fontSize-9xl: 8rem; /* 128px */
+
+--typography-fontWeight-light: 300;
+--typography-fontWeight-normal: 400;
+--typography-fontWeight-medium: 500;
+--typography-fontWeight-semibold: 600;
+--typography-fontWeight-bold: 700;
+
+--typography-lineHeight-none: 1;
+--typography-lineHeight-tight: 1.25;
+--typography-lineHeight-snug: 1.375;
+--typography-lineHeight-normal: 1.5;
+--typography-lineHeight-relaxed: 1.625;
+--typography-lineHeight-loose: 2;
+
+--typography-letterSpacing-tighter: -0.05em;
+--typography-letterSpacing-tight: -0.025em;
+--typography-letterSpacing-normal: 0em;
+--typography-letterSpacing-wide: 0.025em;
+--typography-letterSpacing-wider: 0.05em;
+--typography-letterSpacing-widest: 0.1em;
+
+/* =====================
+    COLORS (PRIMITIVE)
+====================== */
+--color-blue-50: #f0f7ff;
+--color-blue-100: #d6e8ff;
+--color-blue-200: #9ec8ff;
+--color-blue-300: #6babff;
+--color-blue-400: #338bff;
+--color-blue-500: #006dff;
+--color-blue-600: #0059d6;
+--color-blue-700: #0045ad;
+--color-blue-800: #003385;
+--color-blue-900: #00225c;
+--color-blue-950: #001947;
+
+--color-red-50: #fff0f0;
+--color-red-100: #ffd6d6;
+--color-red-200: #ff9e9e;
+--color-red-300: #ff6b6b;
+--color-red-400: #ff3333;
+--color-red-500: #ff0000;
+--color-red-600: #d60000;
+--color-red-700: #ad0000;
+--color-red-800: #850000;
+--color-red-900: #5c0000;
+--color-red-950: #470000;
+
+--color-green-50: #edfdf1;
+--color-green-100: #d1fadc;
+--color-green-200: #9af4b4;
+--color-green-300: #63ee8d;
+--color-green-400: #2ce767;
+--color-green-500: #15c14f;
+--color-green-600: #12a641;
+--color-green-700: #0e8532;
+--color-green-800: #0b6a26;
+--color-green-900: #084a1a;
+--color-green-950: #063c14;
+
+--color-yellow-50: #fffbf0;
+--color-yellow-100: #fff5d6;
+--color-yellow-200: #ffe89e;
+--color-yellow-300: #ffdc6b;
+--color-yellow-400: #ffcf33;
+--color-yellow-500: #ffc400;
+--color-yellow-600: #d6a000;
+--color-yellow-700: #ad7f00;
+--color-yellow-800: #855f00;
+--color-yellow-900: #5c4000;
+--color-yellow-950: #473100;
+
+--color-orange-50: #fef7f1;
+--color-orange-100: #ffe9d6;
+--color-orange-200: #ffcb9e;
+--color-orange-300: #ffaf6b;
+--color-orange-400: #ff9133;
+--color-orange-500: #ff7500;
+--color-orange-600: #d66200;
+--color-orange-700: #ad4f00;
+--color-orange-800: #853d00;
+--color-orange-900: #5c2a00;
+--color-orange-950: #472100;
+
+--color-neutral-0: #ffffff;
+--color-neutral-25: #fafafa;
+--color-neutral-50: #f1f2f3;
+--color-neutral-100: #e1e3e5;
+--color-neutral-200: #c5c9ce;
+--color-neutral-300: #a6adb4;
+--color-neutral-400: #88909b;
+--color-neutral-500: #6c7580;
+--color-neutral-600: #565e66;
+--color-neutral-700: #41474d;
+--color-neutral-800: #2c3035;
+--color-neutral-900: #151719;
+--color-neutral-950: #0c0d0e;
+--color-neutral-1000: #000000;
+
+/* =====================
+    COLORS (SEMANTIC)
+====================== */
+--color-text-primary: var(--color-neutral-900);
+--color-text-secondary: var(--color-neutral-600);
+--color-text-muted: var(--color-neutral-500);
+--color-text-inverse: var(--color-neutral-0);
+--color-text-link: var(--color-blue-600);
+--color-text-link-hover: var(--color-blue-700);
+
+--color-surface: var(--color-neutral-0);
+--color-surface-subtle: var(--color-neutral-50);
+--color-surface-muted: var(--color-neutral-100);
+--color-surface-inverse: var(--color-neutral-950);
+--color-surface-brand: var(--color-blue-50);
+
+--color-border-default: var(--color-neutral-300);
+--color-border-subtle: var(--color-neutral-100);
+--color-border-strong: var(--color-neutral-600);
+--color-border-focus: var(--color-blue-500);
+
+--color-interactive-primary: var(--color-blue-500);
+--color-interactive-primary-hover: var(--color-blue-600);
+--color-interactive-primary-active: var(--color-blue-700);
+
+--color-feedback-error: var(--color-red-500);
+--color-feedback-success: var(--color-green-500);
+--color-feedback-warning: var(--color-yellow-500);
+
+/* ================================
+     CORE SPACING TOKENS
+     ================================ */
+
+--spacing-0: 0;
+--spacing-1: 0.0625rem; /* 1px */
+--spacing-2: 0.125rem; /* 2px */
+--spacing-4: 0.25rem; /* 4px */
+--spacing-6: 0.375rem; /* 6px */
+--spacing-8: 0.5rem; /* 8px */
+--spacing-10: 0.625rem; /* 10px */
+--spacing-12: 0.75rem; /* 12px */
+--spacing-14: 0.875rem; /* 14px */
+--spacing-16: 1rem; /* 16px */
+--spacing-18: 1.125rem; /* 18px */
+--spacing-20: 1.25rem; /* 20px */
+--spacing-22: 1.375rem; /* 22px */
+--spacing-24: 1.5rem; /* 24px */
+--spacing-28: 1.75rem; /* 28px */
+--spacing-32: 2rem; /* 32px */
+--spacing-36: 2.25rem; /* 36px */
+--spacing-40: 2.5rem; /* 40px */
+--spacing-44: 2.75rem; /* 44px */
+--spacing-48: 3rem; /* 48px */
+--spacing-52: 3.25rem; /* 52px */
+--spacing-56: 3.5rem; /* 56px */
+--spacing-64: 4rem; /* 64px */
+--spacing-80: 5rem; /* 80px */
+--spacing-96: 6rem; /* 96px */
+--spacing-112: 7rem; /* 112px */
+--spacing-128: 8rem; /* 128px */
+
+/* Semantic spacing aliases (canonical: --spacing-*) */
+--space-none: var(--spacing-0);
+--space-4xs: var(--spacing-2);
+--space-3xs: var(--spacing-4);
+--space-2xs: var(--spacing-8);
+--space-xs: var(--spacing-12);
+--space-sm: var(--spacing-16);
+--space-md: var(--spacing-24);
+--space-lg: var(--spacing-32);
+--space-xl: var(--spacing-40);
+--space-2xl: var(--spacing-48);
+--space-3xl: var(--spacing-64);
+--space-4xl: var(--spacing-96);
+--space-5xl: var(--spacing-128);
+
+/* ================================
+     CORE BORDER TOKENS
+     ================================ */
+
+--border-width-0: 0;
+--border-width-1: 1px;
+--border-width-2: 2px;
+--border-width-3: 3px;
+--border-width-4: 4px;
+--border-width-8: 8px;
+
+--radius-none: 0;
+--radius-sm: 0.25rem; /* 4px */
+--radius-md: 0.375rem; /* 6px */
+--radius-lg: 0.5rem; /* 8px */
+--radius-xl: 0.75rem; /* 12px */
+--radius-2xl: 1rem; /* 16px */
+--radius-3xl: 1.5rem; /* 24px */
+--radius-full: 9999px;
+
+/* ================================
+     CORE DIMENSION TOKENS
+     ================================ */
+
+--dimension-2px: 2px;
+--dimension-4px: 4px;
+--dimension-8px: 8px;
+--dimension-12px: 12px;
+--dimension-16px: 16px;
+--dimension-20px: 20px;
+--dimension-24px: 24px;
+--dimension-32px: 32px;
+--dimension-34px: 34px;
+--dimension-40px: 40px;
+--dimension-45px: 45px;
+--dimension-48px: 48px;
+--dimension-55px: 55px;
+--dimension-64px: 64px;
+
+/* ================================
+     CORE TRANSITION TOKENS
+     ================================ */
+
+--transition-duration-fast: 150ms;
+--transition-duration-normal: 200ms;
+--transition-duration-slow: 300ms;
+--transition-duration-slower: 500ms;
+
+--transition-easing-linear: linear;
+--transition-easing-smooth: ease-in-out;
+--transition-easing-ease-in: ease-in;
+--transition-easing-ease-out: ease-out;
+--transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+/* ================================
+     CORE SHADOW TOKENS
+     ================================ */
+
+--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+  0 4px 6px -4px rgb(0 0 0 / 0.1);
+--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+  0 8px 10px -6px rgb(0 0 0 / 0.1);
+--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+--shadow-focus-outline-blue: 0 0 0 3px rgba(6, 109, 255, 0.15);
+--shadow-focus-outline-red: 0 0 0 3px rgba(239, 68, 68, 0.15);
+--shadow-focus-outline-green: 0 0 0 3px rgba(34, 197, 94, 0.15);
+
+--focus-outline-primary: 0 0 0 2px var(--color-neutral-0),
+  0 0 0 4px var(--color-blue-500);
+--focus-outline-secondary: 0 0 0 2px var(--color-neutral-0),
+  0 0 0 4px var(--color-neutral-600);
+--focus-outline-error: 0 0 0 2px var(--color-neutral-0),
+  0 0 0 4px var(--color-red-500);
+--focus-outline-success: 0 0 0 2px var(--color-neutral-0),
+  0 0 0 4px var(--color-green-500);
+
+--focus-outline-traditional: 2px solid var(--color-blue-500);
+--focus-outline-offset: 2px;
+
+/* ================================
+     LAYOUT & GRID
+     ================================ */
+
+--padding-button: var(--space-xs) var(--space-md);
+--padding-input: var(--space-xs);
+--padding-card: var(--space-md);
+--padding-card-sm: var(--space-sm);
+--padding-card-lg: var(--space-lg);
+
+--padding-section: var(--space-3xl) 0;
+--padding-section-sm: var(--space-2xl) 0;
+--padding-section-lg: var(--space-4xl) 0;
+
+--container-padding: var(--space-md);
+--container-padding-sm: var(--space-sm);
+--container-padding-lg: var(--space-lg);
+
+--inset-xs: var(--space-xs);
+--inset-sm: var(--space-sm);
+--inset-md: var(--space-md);
+--inset-lg: var(--space-lg);
+
+--stack-xs: var(--space-xs);
+--stack-sm: var(--space-sm);
+--stack-md: var(--space-md);
+--stack-lg: var(--space-lg);
+--stack-xl: var(--space-xl);
+
+--inline-xs: var(--space-xs);
+--inline-sm: var(--space-sm);
+--inline-md: var(--space-md);
+--inline-lg: var(--space-lg);
+
+--touch-target-size: 44px;
+--touch-target-spacing: 8px;
+
+--content-width-readable: 70ch;
+--content-width-max: 1200px;
+
+--grid-container-max-xs: 100%;
+--grid-container-max-sm: 540px;
+--grid-container-max-md: 720px;
+--grid-container-max-lg: 960px;
+--grid-container-max-xl: 1140px;
+--grid-container-max-xxl: 1320px;
+
+--grid-columns: 12;
+
+--grid-gutter-xs: 16px;
+--grid-gutter-sm: 24px;
+--grid-gutter-md: 32px;
+--grid-gutter-lg: 40px;
+
+--grid-padding-xs: 16px;
+--grid-padding-sm: 24px;
+--grid-padding-md: 32px;
+--grid-padding-lg: 40px;
+
+--breakpoint-xs: 0px;
+--breakpoint-sm: 576px;
+--breakpoint-md: 768px;
+--breakpoint-lg: 992px;
+--breakpoint-xl: 1200px;
+--breakpoint-xxl: 1400px;
+
+/* ================================
+     COMPONENT TOKENS - TYPOGRAPHY
+     ================================ */
+
+--typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
+--typography-heading-h1-fontWeight: var(--typography-fontWeight-bold);
+--typography-heading-h1-lineHeight: var(--typography-lineHeight-snug);
+--typography-heading-h1-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h1-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-heading-h2-fontSize: var(--typography-fontSize-4xl);
+--typography-heading-h2-fontWeight: var(--typography-fontWeight-bold);
+--typography-heading-h2-lineHeight: var(--typography-lineHeight-snug);
+--typography-heading-h2-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h2-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-heading-h3-fontSize: var(--typography-fontSize-3xl);
+--typography-heading-h3-fontWeight: var(--typography-fontWeight-semibold);
+--typography-heading-h3-lineHeight: var(--typography-lineHeight-snug);
+--typography-heading-h3-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h3-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-heading-h4-fontSize: var(--typography-fontSize-2xl);
+--typography-heading-h4-fontWeight: var(--typography-fontWeight-semibold);
+--typography-heading-h4-lineHeight: var(--typography-lineHeight-snug);
+--typography-heading-h4-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h4-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-heading-h5-fontSize: var(--typography-fontSize-xl);
+--typography-heading-h5-fontWeight: var(--typography-fontWeight-medium);
+--typography-heading-h5-lineHeight: var(--typography-lineHeight-normal);
+--typography-heading-h5-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h5-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-heading-h6-fontSize: var(--typography-fontSize-lg);
+--typography-heading-h6-fontWeight: var(--typography-fontWeight-medium);
+--typography-heading-h6-lineHeight: var(--typography-lineHeight-normal);
+--typography-heading-h6-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-heading-h6-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-body-large-fontSize: var(--typography-fontSize-lg);
+--typography-body-large-fontWeight: var(--typography-fontWeight-normal);
+--typography-body-large-lineHeight: var(--typography-lineHeight-relaxed);
+--typography-body-large-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-body-large-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-body-regular-fontSize: var(--typography-fontSize-base);
+--typography-body-regular-fontWeight: var(--typography-fontWeight-normal);
+--typography-body-regular-lineHeight: var(--typography-lineHeight-normal);
+--typography-body-regular-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-body-regular-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-body-small-fontSize: var(--typography-fontSize-sm);
+--typography-body-small-fontWeight: var(--typography-fontWeight-normal);
+--typography-body-small-lineHeight: var(--typography-lineHeight-normal);
+--typography-body-small-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-body-small-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-body-lead-fontSize: var(--typography-fontSize-xl);
+--typography-body-lead-fontWeight: var(--typography-fontWeight-normal);
+--typography-body-lead-lineHeight: var(--typography-lineHeight-relaxed);
+--typography-body-lead-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-body-lead-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-label-default-fontSize: var(--typography-fontSize-sm);
+--typography-label-default-fontWeight: var(--typography-fontWeight-medium);
+--typography-label-default-lineHeight: var(--typography-lineHeight-normal);
+--typography-label-default-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-label-default-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-label-small-fontSize: var(--typography-fontSize-xs);
+--typography-label-small-fontWeight: var(--typography-fontWeight-medium);
+--typography-label-small-lineHeight: var(--typography-lineHeight-normal);
+--typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
+--typography-label-small-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
+--typography-label-xsmall-fontSize: var(--typography-fontSize-xs);
+
+--typography-label-large-fontSize: var(--typography-fontSize-base);
+--typography-label-large-fontWeight: var(--typography-fontWeight-medium);
+--typography-label-large-lineHeight: var(--typography-lineHeight-normal);
+--typography-label-large-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-label-large-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-label-xl-fontSize: var(--typography-fontSize-lg);
+--typography-label-xl-fontWeight: var(--typography-fontWeight-medium);
+--typography-label-xl-lineHeight: var(--typography-lineHeight-normal);
+--typography-label-xl-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-label-xl-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-caption-default-fontSize: var(--typography-fontSize-xs);
+--typography-caption-default-fontWeight: var(--typography-fontWeight-normal);
+--typography-caption-default-lineHeight: var(--typography-lineHeight-normal);
+--typography-caption-default-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-caption-default-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-caption-small-fontSize: var(--typography-fontSize-xs);
+--typography-caption-small-fontWeight: var(--typography-fontWeight-normal);
+--typography-caption-small-lineHeight: var(--typography-lineHeight-normal);
+--typography-caption-small-letterSpacing: var(--typography-letterSpacing-wide);
+--typography-caption-small-fontFamily: var(--typography-fontFamily-sans);
+
+--typography-link-default-fontSize: inherit;
+--typography-link-default-fontWeight: var(--typography-fontWeight-normal);
+--typography-link-default-lineHeight: inherit;
+--typography-link-default-letterSpacing: inherit;
+--typography-link-default-fontFamily: inherit;
+--typography-link-default-textDecoration-default: underline;
+--typography-link-default-textDecoration-hover: none;
+
+--typography-link-standalone-fontSize: var(--typography-fontSize-base);
+--typography-link-standalone-fontWeight: var(--typography-fontWeight-medium);
+--typography-link-standalone-lineHeight: var(--typography-lineHeight-normal);
+--typography-link-standalone-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-link-standalone-fontFamily: var(--typography-fontFamily-sans);
+--typography-link-standalone-textDecoration-default: underline;
+--typography-link-standalone-textDecoration-hover: none;
+
+--typography-code-inline-fontSize: 0.875em;
+--typography-code-inline-fontWeight: var(--typography-fontWeight-normal);
+--typography-code-inline-lineHeight: inherit;
+--typography-code-inline-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-code-inline-fontFamily: var(--typography-fontFamily-mono);
+
+--typography-code-block-fontSize: var(--typography-fontSize-sm);
+--typography-code-block-fontWeight: var(--typography-fontWeight-normal);
+--typography-code-block-lineHeight: var(--typography-lineHeight-relaxed);
+--typography-code-block-letterSpacing: var(--typography-letterSpacing-normal);
+--typography-code-block-fontFamily: var(--typography-fontFamily-mono);
+
+--typography-display-3xl-fontSize: var(--typography-fontSize-9xl);
+--typography-display-3xl-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-3xl-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-3xl-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-3xl-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-display-2xl-fontSize: var(--typography-fontSize-8xl);
+--typography-display-2xl-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-2xl-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-2xl-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-2xl-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-display-xl-fontSize: var(--typography-fontSize-7xl);
+--typography-display-xl-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-xl-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-xl-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-xl-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-display-lg-fontSize: var(--typography-fontSize-6xl);
+--typography-display-lg-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-lg-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-lg-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-lg-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-display-md-fontSize: var(--typography-fontSize-5xl);
+--typography-display-md-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-md-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-md-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-md-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+--typography-display-sm-fontSize: var(--typography-fontSize-4xl);
+--typography-display-sm-fontWeight: var(--typography-fontWeight-bold);
+--typography-display-sm-lineHeight: var(--typography-lineHeight-tight);
+--typography-display-sm-letterSpacing: var(--typography-letterSpacing-tight);
+--typography-display-sm-fontFamily: var(--typography-fontFamily-sans-condensed);
+
+/* ================================
+     COMPONENT TOKENS - FORM
+     ================================ */
+
+--form-label-default-fontSize: var(--typography-fontSize-sm);
+--form-label-default-fontWeight: var(--typography-fontWeight-medium);
+--form-label-default-lineHeight: var(--typography-lineHeight-normal);
+--form-label-default-letterSpacing: var(--typography-letterSpacing-normal);
+--form-label-default-fontFamily: var(--typography-fontFamily-sans);
+--form-label-default-color: var(--color-text-primary);
+--form-label-default-marginBottom: var(--spacing-1);
+
+--form-label-large-fontSize: var(--typography-fontSize-lg);
+--form-label-large-fontWeight: var(--typography-fontWeight-medium);
+--form-label-large-lineHeight: var(--typography-lineHeight-normal);
+--form-label-large-letterSpacing: var(--typography-letterSpacing-normal);
+--form-label-large-fontFamily: var(--typography-fontFamily-sans);
+--form-label-large-color: var(--color-text-primary);
+--form-label-large-marginBottom: var(--spacing-2);
+
+--form-label-small-fontSize: var(--typography-fontSize-xs);
+--form-label-small-fontWeight: var(--typography-fontWeight-medium);
+--form-label-small-lineHeight: var(--typography-lineHeight-normal);
+--form-label-small-letterSpacing: var(--typography-letterSpacing-wide);
+--form-label-small-fontFamily: var(--typography-fontFamily-sans);
+--form-label-small-color: var(--color-text-primary);
+--form-label-small-marginBottom: var(--spacing-1);
+
+--form-label-required-color: var(--color-red-500);
+--form-label-required-marginLeft: var(--spacing-1);
+
+--form-input-small-height: var(--dimension-34px);
+--form-input-small-fontSize: var(--typography-fontSize-sm);
+--form-input-small-padding: var(--spacing-8) var(--spacing-12);
+--form-input-small-borderRadius: var(--radius-sm);
+
+--form-input-medium-height: var(--dimension-45px);
+--form-input-medium-fontSize: var(--typography-fontSize-base);
+--form-input-medium-padding: var(--spacing-12) var(--spacing-16);
+--form-input-medium-borderRadius: var(--radius-md);
+
+--form-input-large-height: var(--dimension-55px);
+--form-input-large-fontSize: var(--typography-fontSize-lg);
+--form-input-large-padding: var(--spacing-16) var(--spacing-20);
+--form-input-large-borderRadius: var(--radius-lg);
+
+--form-input-default-backgroundColor: var(--color-surface);
+--form-input-default-borderColor: var(--color-border-default);
+--form-input-default-borderWidth: var(--border-width-1);
+--form-input-default-color: var(--color-text-primary);
+--form-input-default-fontFamily: var(--typography-fontFamily-sans);
+--form-input-default-lineHeight: var(--typography-lineHeight-normal);
+
+--form-input-focus-borderColor: var(--color-border-focus);
+--form-input-focus-boxShadow: var(--shadow-focus-outline-blue);
+
+--form-input-error-backgroundColor: var(--color-red-50);
+--form-input-error-borderColor: var(--color-red-500);
+--form-input-error-placeholderColor: var(--color-red-400);
+
+--form-input-success-backgroundColor: var(--color-green-50);
+--form-input-success-borderColor: var(--color-green-500);
+--form-input-success-placeholderColor: var(--color-green-400);
+
+--form-input-disabled-backgroundColor: var(--color-neutral-100);
+--form-input-disabled-borderColor: var(--color-border-default);
+--form-input-disabled-color: var(--color-text-muted);
+--form-input-disabled-placeholderColor: var(--color-neutral-400);
+
+--form-help-text-default-fontSize: var(--typography-fontSize-xs);
+--form-help-text-default-fontWeight: var(--typography-fontWeight-normal);
+--form-help-text-default-lineHeight: var(--typography-lineHeight-normal);
+--form-help-text-default-letterSpacing: var(--typography-letterSpacing-normal);
+--form-help-text-default-fontFamily: var(--typography-fontFamily-sans);
+--form-help-text-default-color: var(--color-text-secondary);
+--form-help-text-default-marginTop: var(--spacing-1);
+
+--form-help-text-error-color: var(--color-red-600);
+--form-help-text-success-color: var(--color-green-600);
+
+--form-fieldSpacing: var(--spacing-6);
+--form-sectionSpacing: var(--spacing-8);
+--form-labelSpacing: var(--spacing-1);
+--form-helpTextSpacing: var(--spacing-1);
+
+/* ================================
+     COMPONENT TOKENS - BUTTON
+     ================================ */
+
+--button-size-small-padding-vertical: var(--spacing-2);
+--button-size-small-padding-horizontal: var(--spacing-4);
+--button-size-small-fontSize: var(--typography-fontSize-sm);
+--button-size-small-height: var(--dimension-34px);
+--button-size-small-borderRadius: var(--radius-sm);
+--button-size-small-gap: var(--spacing-1);
+
+--button-size-medium-padding-vertical: var(--spacing-12);
+--button-size-medium-padding-horizontal: var(--spacing-20);
+--button-size-medium-fontSize: var(--typography-fontSize-base);
+--button-size-medium-height: var(--dimension-45px);
+--button-size-medium-borderRadius: var(--radius-md);
+--button-size-medium-gap: var(--spacing-2);
+
+--button-size-large-padding-vertical: var(--spacing-4);
+--button-size-large-padding-horizontal: var(--spacing-6);
+--button-size-large-fontSize: var(--typography-fontSize-lg);
+--button-size-large-height: var(--dimension-55px);
+--button-size-large-borderRadius: var(--radius-lg);
+--button-size-large-gap: var(--spacing-2);
+
+--button-shared-fontFamily: var(--typography-fontFamily-sans);
+--button-shared-fontWeight: var(--typography-fontWeight-medium);
+--button-shared-lineHeight: var(--typography-lineHeight-tight);
+--button-shared-letterSpacing: var(--typography-letterSpacing-normal);
+--button-shared-borderWidth: var(--border-width-1);
+--button-shared-transition-properties: background-color, border-color, color,
+  box-shadow;
+--button-shared-transition-duration: var(--transition-duration-normal);
+--button-shared-transition-easing: var(--transition-easing-smooth);
+--button-shared-focus-outline: var(--focus-outline-traditional);
+--button-shared-focus-outlineOffset: var(--focus-outline-offset);
+--button-shared-focus-boxShadow: var(--focus-outline-primary);
+--button-shared-disabled-opacity: 0.6;
+--button-shared-disabled-cursor: not-allowed;
+
+--button-primary-background-default: var(--color-blue-500);
+--button-primary-text-default: var(--color-neutral-0);
+--button-primary-border-default: var(--color-blue-500);
+--button-primary-background-hover: var(--color-blue-600);
+--button-primary-border-hover: var(--color-blue-600);
+--button-primary-background-active: var(--color-blue-700);
+--button-primary-border-active: var(--color-blue-700);
+--button-primary-border-focus: var(--color-blue-500);
+--button-primary-background-disabled: var(--color-neutral-300);
+--button-primary-text-disabled: var(--color-neutral-500);
+--button-primary-border-disabled: var(--color-neutral-300);
+
+--button-secondary-background-default: var(--color-neutral-950);
+--button-secondary-text-default: var(--color-neutral-0);
+--button-secondary-border-default: var(--color-neutral-950);
+--button-secondary-background-hover: var(--color-neutral-900);
+--button-secondary-text-hover: var(--color-neutral-0);
+--button-secondary-border-hover: var(--color-neutral-900);
+--button-secondary-background-active: var(--color-neutral-800);
+--button-secondary-text-active: var(--color-neutral-0);
+--button-secondary-border-active: var(--color-neutral-800);
+--button-secondary-border-focus: var(--color-neutral-950);
+--button-secondary-background-disabled: var(--color-neutral-300);
+--button-secondary-text-disabled: var(--color-neutral-500);
+--button-secondary-border-disabled: var(--color-neutral-300);
+
+--button-tertiaryPrimary-background-default: transparent;
+--button-tertiaryPrimary-text-default: var(--color-blue-500);
+--button-tertiaryPrimary-border-default: var(--color-blue-500);
+--button-tertiaryPrimary-borderWidth: var(--border-width-2);
+--button-tertiaryPrimary-background-hover: var(--color-blue-50);
+--button-tertiaryPrimary-text-hover: var(--color-blue-500);
+--button-tertiaryPrimary-border-hover: var(--color-blue-500);
+--button-tertiaryPrimary-background-active: var(--color-blue-500);
+--button-tertiaryPrimary-text-active: var(--color-neutral-0);
+--button-tertiaryPrimary-border-active: var(--color-blue-500);
+--button-tertiaryPrimary-border-focus: var(--color-blue-500);
+--button-tertiaryPrimary-background-disabled: transparent;
+--button-tertiaryPrimary-text-disabled: var(--color-neutral-400);
+--button-tertiaryPrimary-border-disabled: var(--color-neutral-300);
+
+--button-tertiarySecondary-background-default: transparent;
+--button-tertiarySecondary-text-default: var(--color-neutral-900);
+--button-tertiarySecondary-border-default: var(--color-neutral-900);
+--button-tertiarySecondary-borderWidth: var(--border-width-2);
+--button-tertiarySecondary-background-hover: var(--color-neutral-100);
+--button-tertiarySecondary-text-hover: var(--color-neutral-900);
+--button-tertiarySecondary-border-hover: var(--color-neutral-900);
+--button-tertiarySecondary-background-active: var(--color-neutral-900);
+--button-tertiarySecondary-text-active: var(--color-neutral-0);
+--button-tertiarySecondary-border-active: var(--color-neutral-900);
+--button-tertiarySecondary-border-focus: var(--color-neutral-900);
+--button-tertiarySecondary-background-disabled: transparent;
+--button-tertiarySecondary-text-disabled: var(--color-neutral-400);
+--button-tertiarySecondary-border-disabled: var(--color-neutral-300);
+
+--button-cta-background-default: var(--color-red-500);
+--button-cta-text-default: var(--color-neutral-0);
+--button-cta-border-default: var(--color-red-500);
+--button-cta-background-hover: var(--color-red-600);
+--button-cta-border-hover: var(--color-red-600);
+--button-cta-background-active: var(--color-red-700);
+--button-cta-border-active: var(--color-red-700);
+--button-cta-border-focus: var(--color-red-500);
+--button-cta-background-disabled: var(--color-neutral-300);
+--button-cta-text-disabled: var(--color-neutral-500);
+--button-cta-border-disabled: var(--color-neutral-300);
+
+--button-empty-background-default: var(--color-neutral-200);
+--button-empty-text-default: transparent;
+--button-empty-border-default: var(--color-neutral-200);
+
+--button-disabled-backgroundColor: var(--color-neutral-100);
+--button-disabled-borderColor: var(--color-neutral-300);
+--button-disabled-color: var(--color-neutral-500);
+
+--button-focus-boxShadow: var(--shadow-focus-outline-blue);
+
+/* Deprecated button size aliases */
+--button-small-height: var(--button-size-small-height);
+--button-small-fontSize: var(--button-size-small-fontSize);
+--button-small-padding: var(--spacing-8) var(--spacing-12);
+--button-small-borderRadius: var(--button-size-small-borderRadius);
+
+--button-medium-height: var(--button-size-medium-height);
+--button-medium-fontSize: var(--button-size-medium-fontSize);
+--button-medium-padding: var(--spacing-12) var(--spacing-16);
+--button-medium-borderRadius: var(--button-size-medium-borderRadius);
+
+--button-large-height: var(--button-size-large-height);
+--button-large-fontSize: var(--button-size-large-fontSize);
+--button-large-padding: var(--spacing-16) var(--spacing-20);
+--button-large-borderRadius: var(--button-size-large-borderRadius);
+
+--button-default-backgroundColor: var(--color-surface);
+--button-default-borderColor: var(--color-border-default);
+--button-default-borderWidth: var(--border-width-1);
+--button-default-color: var(--color-text-primary);
+--button-default-fontFamily: var(--typography-fontFamily-sans);
+--button-default-fontWeight: var(--typography-fontWeight-medium);
+--button-default-lineHeight: var(--typography-lineHeight-normal);
+
+/* ================================
+     COMPONENT TOKENS - ANNOTATION
+     ================================ */
+
+--footnote-reference-fontSize: 0.75em;
+--footnote-reference-fontWeight: var(--typography-fontWeight-normal);
+--footnote-reference-lineHeight: 1;
+--footnote-reference-verticalAlign: super;
+--footnote-reference-color: inherit;
+--footnote-reference-marginLeft: 0.1em;
+--footnote-reference-marginRight: 0.2em;
+
+--citation-reference-fontSize: inherit;
+--citation-reference-fontWeight: var(--typography-fontWeight-normal);
+--citation-reference-lineHeight: inherit;
+--citation-reference-color: var(--color-text-link);
+--citation-reference-textDecoration: underline;
+--citation-reference-hover-color: var(--color-text-link-hover);
+--citation-reference-hover-textDecoration: none;
+
+--math-superscript-fontSize: 0.75em;
+--math-superscript-fontWeight: var(--typography-fontWeight-normal);
+--math-superscript-lineHeight: 1;
+--math-superscript-verticalAlign: super;
+--math-superscript-marginLeft: 0.05em;
+
+--math-subscript-fontSize: 0.75em;
+--math-subscript-fontWeight: var(--typography-fontWeight-normal);
+--math-subscript-lineHeight: 1;
+--math-subscript-verticalAlign: sub;
+--math-subscript-marginLeft: 0.05em;
+
+/* ================================
+     COMPONENT TOKENS - ICON
+     ================================ */
+
+--icon-xs-size: var(--dimension-12px);
+--icon-sm-size: var(--dimension-16px);
+--icon-md-size: var(--dimension-20px);
+--icon-lg-size: var(--dimension-24px);
+--icon-xl-size: var(--dimension-32px);
+--icon-2xl-size: var(--dimension-48px);
+--icon-3xl-size: var(--dimension-64px);
+
+--icon-button-small-size: var(--dimension-16px);
+--icon-button-medium-size: var(--dimension-20px);
+--icon-button-large-size: var(--dimension-24px);
+
+--icon-form-small-size: var(--dimension-16px);
+--icon-form-medium-size: var(--dimension-20px);
+--icon-form-large-size: var(--dimension-24px);
+
+--icon-default-color: var(--color-text-secondary);
+--icon-hover-color: var(--color-neutral-700);
+--icon-active-color: var(--color-neutral-800);
+--icon-disabled-color: var(--color-neutral-400);
+
+--icon-primary-color: var(--color-blue-500);
+--icon-primary-hover-color: var(--color-blue-600);
+--icon-primary-active-color: var(--color-blue-700);
+
+--icon-success-color: var(--color-green-500);
+--icon-warning-color: var(--color-yellow-500);
+--icon-error-color: var(--color-red-500);
+/* ================================
+     BLOG — LAYOUT
+     ================================ */
+
+--layout-content-max-width: var(--content-width-max);
+--layout-article-max-width: 45rem;
+--layout-article-inline-padding: var(--spacing-24);
+--layout-page-max-width: var(--layout-content-max-width);
+--layout-page-gap: var(--spacing-32);
+--layout-page-main-ratio: 3fr;
+--layout-page-sidebar-ratio: 1fr;
+--layout-article-toc-width: 13rem;
+--layout-article-toc-gap: var(--spacing-32);
+--layout-section-gap: var(--spacing-64);
+
+--layout-awards-section-background: var(--color-surface-brand);
+--layout-awards-banner-max-width: 37.5rem;
+--layout-awards-cluster-max-width: 49.5625rem;
+--layout-awards-intro-max-width: 39.4375rem;
+--layout-awards-content-max-width: 53.0625rem;
+--layout-ensemble-inline-padding: var(--spacing-24);
+
+/* ================================
+     BLOG — PROSE / ARTICLE
+     ================================ */
+
+--blog-prose-max-width: var(--content-width-readable);
+--blog-prose-fontSize: var(--typography-body-regular-fontSize);
+--blog-prose-lineHeight: var(--typography-body-regular-lineHeight);
+--blog-prose-color: var(--color-text-primary);
+--blog-prose-paragraph-spacing: var(--spacing-24);
+--blog-prose-heading-spacing-top: var(--spacing-48);
+--blog-prose-heading-spacing-bottom: var(--spacing-16);
+--blog-prose-list-spacing: var(--spacing-8);
+--blog-prose-list-indent: var(--spacing-24);
+
+--blog-prose-subhead-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-prose-subhead-fontSize: var(--typography-fontSize-2xl);
+--blog-prose-subhead-fontWeight: var(--typography-fontWeight-semibold);
+--blog-prose-subhead-lineHeight: var(--typography-lineHeight-snug);
+--blog-prose-subhead-color: var(--blog-prose-color);
+--blog-prose-subhead-spacing-top: var(--spacing-32);
+--blog-prose-subhead-spacing-bottom: var(--spacing-8);
+
+--blog-related-label-fontFamily: var(--typography-fontFamily-sans);
+--blog-related-label-fontSize: var(--blog-prose-fontSize);
+--blog-related-label-fontWeight: var(--typography-body-regular-fontWeight);
+--blog-related-label-fontStyle: italic;
+--blog-related-label-lineHeight: var(--blog-prose-lineHeight);
+--blog-related-label-color: var(--blog-prose-color);
+--blog-related-label-spacing-top: var(--spacing-32);
+
+/* Hero abstract accent — left bar only (not used by body quotes) */
+--blog-accent-border-width: var(--border-width-2);
+--blog-accent-border-color: var(--color-blue-500);
+--blog-accent-padding: var(--spacing-24);
+
+/* Body quote — tinted panel + oversized opening mark */
+--blog-quote-background: var(--color-blue-50);
+--blog-quote-borderRadius: var(--radius-2xl);
+--blog-quote-padding-block: var(--spacing-24);
+--blog-quote-padding-inline: var(--spacing-24);
+--blog-quote-padding-inline-start: var(--spacing-16);
+--blog-quote-mark-gap: var(--spacing-4);
+--blog-quote-mark-fontSize: 4rem;
+--blog-quote-mark-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-quote-mark-fontWeight: var(--typography-fontWeight-semibold);
+--blog-quote-mark-color: var(--color-blue-200);
+--blog-quote-mark-offset-top: -0.05em;
+--blog-quote-mark-lineHeight: 0.85;
+--blog-quote-fontSize: var(--typography-fontSize-xl);
+--blog-quote-lineHeight: var(--typography-lineHeight-relaxed);
+--blog-quote-color: var(--color-text-primary);
+--blog-quote-fontStyle: italic;
+--blog-quote-attribution-fontSize: var(--typography-fontSize-sm);
+--blog-quote-attribution-color: var(--color-text-muted);
+
+--blog-pullquote-fontSize: var(--typography-fontSize-2xl);
+--blog-pullquote-fontWeight: var(--typography-fontWeight-medium);
+--blog-pullquote-lineHeight: var(--typography-lineHeight-snug);
+--blog-pullquote-color: var(--color-text-primary);
+
+--blog-code-block-background: var(--color-neutral-50);
+--blog-code-block-color: var(--color-text-primary);
+--blog-code-block-fontFamily: var(--typography-code-block-fontFamily);
+--blog-code-block-fontSize: var(--typography-code-block-fontSize);
+--blog-code-block-fontWeight: var(--typography-code-block-fontWeight);
+--blog-code-block-lineHeight: var(--typography-code-block-lineHeight);
+--blog-code-block-padding: var(--spacing-24);
+--blog-code-block-borderRadius: var(--radius-2xl);
+--blog-code-block-selection-background: var(--color-neutral-100);
+
+/* ================================
+     BLOG — META & BYLINE
+     ================================ */
+
+--blog-meta-fontSize: var(--typography-fontSize-sm);
+--blog-meta-fontWeight: var(--typography-fontWeight-normal);
+--blog-meta-color: var(--color-text-muted);
+--blog-meta-gap: var(--spacing-8);
+--blog-meta-separator-fontSize: var(--typography-fontSize-base);
+--blog-meta-separator-color: var(--color-text-muted);
+--blog-meta-separator-fontWeight: var(--typography-fontWeight-semibold);
+
+--blog-byline-fontSize: var(--typography-fontSize-sm);
+--blog-byline-color: var(--color-text-secondary);
+--blog-byline-gap: var(--spacing-12);
+--blog-byline-avatar-size: var(--dimension-40px);
+
+--blog-date-color: var(--color-text-muted);
+--blog-reading-time-color: var(--color-text-muted);
+
+/* ================================
+     BLOG — AUTHORS (HERO)
+     ================================ */
+
+--blog-authors-label-fontSize: var(--typography-fontSize-sm);
+--blog-authors-label-fontWeight: var(--typography-fontWeight-medium);
+--blog-authors-label-color: var(--color-text-primary);
+--blog-authors-gap: var(--spacing-8);
+--blog-authors-pill-gap: var(--spacing-8);
+
+--blog-hero-divider-width: var(--border-width-1);
+--blog-hero-divider-color: var(--color-border-subtle);
+
+/* ================================
+     BLOG — TAGS & CHIPS
+     ================================ */
+
+--blog-tag-padding: var(--spacing-4) var(--spacing-8);
+--blog-tag-fontSize: var(--typography-label-default-fontSize);
+--blog-tag-fontWeight: var(--typography-label-default-fontWeight);
+--blog-tag-lineHeight: var(--dimension-20px);
+--blog-tag-borderRadius: var(--radius-full);
+--blog-tag-border-width: var(--border-width-1);
+--blog-tag-gap: var(--spacing-8);
+
+--blog-tag-default-background: var(--color-surface-subtle);
+--blog-tag-default-color: var(--color-text-secondary);
+--blog-tag-default-border-color: var(--color-border-subtle);
+
+--blog-tag-brand-background: var(--color-blue-100);
+--blog-tag-brand-color: var(--color-blue-800);
+--blog-tag-brand-border-color: var(--color-blue-100);
+
+--blog-tag-brand-hover-background: var(--color-blue-200);
+--blog-tag-brand-hover-color: var(--color-blue-800);
+
+--blog-tag-hover-background: var(--color-neutral-100);
+--blog-tag-hover-color: var(--color-text-primary);
+
+/* ================================
+     BLOG — CARDS
+     ================================ */
+
+--blog-card-padding: var(--spacing-24);
+--blog-card-gap: var(--spacing-16);
+--blog-card-borderRadius: var(--radius-lg);
+--blog-card-border-color: var(--color-border-subtle);
+--blog-card-background: var(--color-surface);
+--blog-card-shadow: var(--shadow-sm);
+--blog-card-shadow-hover: var(--shadow-md);
+--blog-card-title-fontSize: var(--typography-fontSize-xl);
+--blog-card-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-card-title-fontFamily: var(--typography-heading-h5-fontFamily);
+--blog-card-excerpt-color: var(--color-text-secondary);
+--blog-card-image-aspect-ratio: 16 / 9;
+
+/* ================================
+     BLOG — KEY TAKEAWAYS
+     ================================ */
+
+--blog-takeaways-borderRadius: var(--radius-2xl);
+--blog-takeaways-border-width: var(--border-width-1);
+--blog-takeaways-border-color: var(--blog-card-border-color);
+--blog-takeaways-background: var(--blog-card-background);
+--blog-takeaways-padding-inline: var(--spacing-24);
+--blog-takeaways-header-padding-block: var(--spacing-20);
+--blog-takeaways-header-padding-bottom: var(--spacing-20);
+--blog-takeaways-body-padding-top: var(--spacing-16);
+--blog-takeaways-body-padding-bottom: var(--spacing-24);
+--blog-takeaways-divider-width: var(--border-width-1);
+--blog-takeaways-divider-color: var(--color-border-subtle);
+--blog-takeaways-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-takeaways-title-fontSize: var(--typography-fontSize-base);
+--blog-takeaways-title-fontWeight: var(--typography-fontWeight-bold);
+--blog-takeaways-title-lineHeight: var(--typography-lineHeight-normal);
+--blog-takeaways-title-color: var(--color-text-primary);
+--blog-takeaways-item-fontSize: var(--blog-prose-fontSize);
+--blog-takeaways-item-fontWeight: var(--typography-fontWeight-normal);
+--blog-takeaways-item-lineHeight: var(--typography-lineHeight-relaxed);
+--blog-takeaways-item-color: var(--blog-prose-color);
+--blog-takeaways-item-gap: var(--spacing-12);
+--blog-takeaways-list-indent: var(--spacing-16);
+--blog-takeaways-bullet-gap: var(--spacing-4);
+
+/* ================================
+     BLOG — TABLE OF CONTENTS
+     ================================ */
+
+--blog-toc-borderRadius: var(--blog-takeaways-borderRadius);
+--blog-toc-border-width: var(--blog-takeaways-border-width);
+--blog-toc-border-color: var(--blog-takeaways-border-color);
+--blog-toc-background: var(--blog-takeaways-background);
+--blog-toc-link-fontSize: var(--blog-nav-link-fontSize);
+--blog-toc-link-fontWeight: var(--blog-nav-link-fontWeight);
+--blog-toc-link-lineHeight: var(--typography-lineHeight-normal);
+--blog-toc-link-color: var(--blog-nav-link-color);
+--blog-toc-link-hover-color: var(--blog-nav-link-hover-color);
+--blog-toc-item-gap: var(--spacing-8);
+--blog-toc-sticky-offset: var(--spacing-24);
+--blog-toc-marker-size: var(--spacing-8);
+--blog-toc-marker-gap: var(--spacing-8);
+--blog-toc-marker-offset-top: 0.65em;
+--blog-toc-marker-color: var(--color-blue-500);
+--blog-toc-link-active-color: var(--color-blue-600);
+--blog-toc-scroll-offset: var(--spacing-48);
+--blog-toc-reading-line-offset: var(--spacing-128);
+--blog-toc-toggle-size: var(--spacing-32);
+--blog-toc-toggle-fontSize: var(--typography-fontSize-2xl);
+--blog-toc-toggle-color: var(--color-blue-500);
+--blog-toc-toggle-hover-color: var(--color-blue-600);
+
+/* ================================
+     BLOG — REPORT PROMO
+     Sidebar lead magnet — aliases only; styles use shared core/blog tokens.
+     ================================ */
+
+--blog-report-promo-background: var(--color-blue-100);
+--blog-report-promo-borderRadius: var(--blog-takeaways-borderRadius);
+--blog-report-promo-border-width: var(--blog-newsletter-border-width);
+--blog-report-promo-border-color: var(--blog-newsletter-border-color);
+--blog-report-promo-max-width: 40rem;
+--blog-report-promo-padding: var(--spacing-24);
+--blog-report-promo-gap: var(--spacing-24);
+--blog-report-promo-media-max-height: 16rem;
+--blog-report-promo-media-width-desktop: 13.25rem;
+--blog-report-promo-image-width-desktop: 26.5625rem;
+--blog-report-promo-media-aspect-ratio: 490 / 157;
+--blog-report-promo-image-crop-offset: -70%;
+--blog-report-promo-image-height-ratio: 492 / 157;
+--blog-report-promo-title-fontSize: var(--typography-fontSize-xl);
+--blog-report-promo-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-report-promo-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-report-promo-title-color: var(--color-text-primary);
+--blog-report-promo-description-fontSize: var(--typography-fontSize-base);
+--blog-report-promo-description-lineHeight: var(--typography-lineHeight-normal);
+--blog-report-promo-description-color: var(--color-text-muted);
+--blog-report-promo-body-gap: var(--spacing-8);
+--blog-report-promo-cta-spacing-top: var(--spacing-4);
+
+/* ================================
+     BLOG — RELATED ARTICLES
+     ================================ */
+
+--blog-related-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-related-title-fontSize: var(--typography-fontSize-2xl);
+--blog-related-title-fontWeight: var(--typography-fontWeight-bold);
+--blog-related-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-related-title-color: var(--color-text-primary);
+--blog-related-title-spacing-bottom: var(--spacing-24);
+--blog-related-grid-gap: var(--spacing-24);
+--blog-related-grid-gap-mobile: var(--spacing-32);
+--blog-related-card-body-gap: var(--spacing-12);
+--blog-related-card-image-gap: var(--spacing-12);
+--blog-related-card-divider-color: var(--color-border-subtle);
+--blog-related-card-divider-width: var(--border-width-1);
+--blog-related-card-image-aspect-ratio-mobile: 2 / 1;
+--blog-related-mobile-preview-count: 2;
+--blog-related-see-all-fontFamily: var(--typography-fontFamily-sans);
+--blog-related-see-all-fontSize: var(--typography-fontSize-base);
+--blog-related-see-all-fontWeight: var(--typography-fontWeight-medium);
+--blog-related-see-all-color: var(--color-blue-500);
+--blog-related-see-all-hover-color: var(--color-blue-700);
+--blog-related-see-all-spacing-top: var(--spacing-8);
+--blog-related-see-all-underline-offset: 0.15em;
+--blog-related-card-title-fontFamily: var(--blog-card-title-fontFamily);
+--blog-related-card-title-fontSize: var(--blog-card-title-fontSize);
+--blog-related-card-title-fontWeight: var(--blog-card-title-fontWeight);
+--blog-related-card-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-related-card-title-color: var(--color-text-primary);
+--blog-related-card-excerpt-fontSize: var(--typography-fontSize-sm);
+--blog-related-card-excerpt-color: var(--blog-card-excerpt-color);
+--blog-related-card-meta-fontSize: var(--blog-meta-fontSize);
+--blog-related-card-image-aspect-ratio: var(--blog-card-image-aspect-ratio);
+--blog-related-card-image-borderRadius: var(--radius-xl);
+--blog-related-card-tag-inset: var(--spacing-12);
+--blog-related-card-tag-background: var(--blog-tag-brand-background);
+--blog-related-card-tag-color: var(--blog-tag-brand-color);
+--blog-related-card-tag-border-color: var(--blog-tag-brand-border-color);
+
+/* ================================
+     BLOG — MOST POPULAR
+     ================================ */
+
+--blog-popular-title-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-popular-title-fontSize: var(--typography-fontSize-2xl);
+--blog-popular-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-popular-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-popular-title-color: var(--color-text-primary);
+--blog-popular-title-spacing-bottom: var(--spacing-24);
+--blog-popular-item-gap: var(--spacing-24);
+--blog-popular-item-inner-gap: var(--spacing-12);
+--blog-popular-thumb-width: 5rem;
+--blog-popular-thumb-aspect-ratio: var(--blog-card-image-aspect-ratio);
+--blog-popular-thumb-borderRadius: var(--radius-lg);
+--blog-popular-thumb-background: var(--blog-content-image-background);
+--blog-popular-item-title-fontFamily: var(--typography-fontFamily-sans);
+--blog-popular-item-title-fontSize: var(--typography-fontSize-sm);
+--blog-popular-item-title-fontWeight: var(--typography-fontWeight-medium);
+--blog-popular-item-title-lineHeight: var(--typography-lineHeight-snug);
+--blog-popular-item-title-color: var(--color-blue-500);
+--blog-popular-item-date-fontSize: var(--typography-fontSize-xs);
+--blog-popular-item-date-color: var(--color-text-muted);
+--blog-popular-link-hover-color: var(--color-text-link-hover);
+
+/* ================================
+     BLOG — HERO
+     ================================ */
+
+--blog-hero-min-height: 24rem;
+--blog-hero-padding: var(--spacing-64) var(--spacing-24);
+--blog-hero-background: var(--color-surface-brand);
+--blog-hero-title-fontSize: var(--typography-display-md-fontSize);
+--blog-hero-title-fontWeight: var(--typography-fontWeight-semibold);
+--blog-hero-title-lineHeight: var(--typography-display-md-lineHeight);
+--blog-hero-title-fontFamily: var(--typography-display-md-fontFamily);
+--blog-hero-title-color: var(--color-blue-500);
+--blog-hero-subtitle-color: var(--blog-prose-color);
+--blog-hero-subtitle-fontSize: var(--typography-body-lead-fontSize);
+--blog-hero-subtitle-fontFamily: var(--typography-body-lead-fontFamily);
+--blog-hero-subtitle-fontStyle: normal;
+--blog-hero-abstract-border-width: var(--blog-accent-border-width);
+--blog-hero-abstract-border-color: var(--blog-accent-border-color);
+--blog-hero-abstract-padding: var(--spacing-16);
+--blog-abstract-spacing-after-last: var(--spacing-24);
+--blog-hero-abstract-to-featured-gap: var(--spacing-24);
+--blog-hero-featured-borderRadius: var(--radius-2xl);
+--blog-hero-featured-aspect-ratio: 16 / 9;
+--blog-hero-featured-background: var(--color-neutral-50);
+
+/* ================================
+     BLOG — CONTENT IMAGES
+     ================================ */
+
+--blog-content-image-borderRadius: var(--blog-hero-featured-borderRadius);
+--blog-content-image-background: var(--color-neutral-100);
+
+--blog-standout-fontFamily: var(--typography-fontFamily-sans-condensed);
+--blog-standout-fontSize: var(--typography-fontSize-xl);
+--blog-standout-fontWeight: var(--typography-fontWeight-bold);
+--blog-standout-fontStyle: italic;
+--blog-standout-lineHeight: var(--typography-lineHeight-snug);
+--blog-standout-color: var(--color-text-primary);
+
+/* ================================
+     BLOG — NAVIGATION
+     ================================ */
+
+--blog-nav-height: 4rem;
+--blog-nav-padding: 0 var(--spacing-24);
+--blog-nav-background: var(--color-surface);
+--blog-nav-border-color: var(--color-border-subtle);
+--blog-nav-link-color: var(--color-text-primary);
+--blog-nav-link-hover-color: var(--color-text-link);
+--blog-nav-link-fontSize: var(--typography-fontSize-sm);
+--blog-nav-link-fontWeight: var(--typography-fontWeight-medium);
+
+/* ================================
+     BLOG — NEWSLETTER SIGNUP
+     ================================ */
+
+--blog-newsletter-padding: var(--spacing-32);
+--blog-newsletter-gap: var(--spacing-24);
+--blog-newsletter-borderRadius: var(--radius-2xl);
+--blog-newsletter-border-width: var(--border-width-1);
+--blog-newsletter-border-color: var(--blog-card-border-color);
+--blog-newsletter-background: var(--blog-card-background);
+--blog-newsletter-icon-size: var(--icon-2xl-size);
+--blog-newsletter-icon-color: var(--color-blue-500);
+--blog-newsletter-heading-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-heading-fontSize: var(--typography-fontSize-xl);
+--blog-newsletter-heading-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-heading-lineHeight: var(--typography-lineHeight-snug);
+--blog-newsletter-heading-color: var(--color-text-primary);
+--blog-newsletter-heading-max-width: 28rem;
+--blog-newsletter-heading-emphasis-fontStyle: italic;
+--blog-newsletter-description-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-description-fontSize: var(--typography-fontSize-sm);
+--blog-newsletter-description-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-description-lineHeight: var(--typography-lineHeight-normal);
+--blog-newsletter-description-color: var(--color-text-muted);
+--blog-newsletter-description-max-width: 28rem;
+--blog-newsletter-form-max-width: 32rem;
+--blog-newsletter-form-gap: var(--spacing-12);
+--blog-newsletter-disclaimer-fontFamily: var(--typography-fontFamily-sans);
+--blog-newsletter-disclaimer-fontSize: var(--typography-fontSize-xs);
+--blog-newsletter-disclaimer-fontWeight: var(--typography-fontWeight-normal);
+--blog-newsletter-disclaimer-lineHeight: var(--typography-lineHeight-normal);
+--blog-newsletter-disclaimer-color: var(--color-text-muted);
+--blog-newsletter-disclaimer-max-width: 28rem;
+--blog-newsletter-spacing-top: var(--spacing-48);
+--blog-newsletter-spacing-bottom: var(--spacing-32);
+/* ================================
+     LEGACY ALIASES (DEPRECATED)
+     Do not add new references — use core tokens instead.
+     These names are preserved for backward compatibility only.
+     ================================ */
+
+/* Display sizes (legacy px-based names) */
+--display-xxsmall: 2.75rem;
+--display-xsmall: 3rem;
+--display-small: 3.25rem;
+--display-medium: 3.5rem;
+--display-large: 3.75rem;
+--display-xlarge: 4rem;
+
+--display-xxsmall-mobile: 2.125rem;
+--display-xsmall-mobile: 2.25rem;
+--display-small-mobile: 2.375rem;
+--display-medium-mobile: 2.5rem;
+--display-large-mobile: 2.75rem;
+--display-xlarge-mobile: 3rem;
+
+--display-xlarge-line-height: 1.1;
+--display-medium-line-height: 1.15;
+--display-xlarge-mobile-line-height: 1.15;
+--display-medium-mobile-line-height: 1.2;
+
+/* Heading sizes (legacy names — map to current scale) */
+--heading-xxsmall: var(--typography-fontSize-lg);
+--heading-xsmall: var(--typography-fontSize-xl);
+--heading-medium: 1.75rem;
+--heading-xlarge: var(--typography-fontSize-4xl);
+--heading-xxlarge: 2.5rem;
+--heading-xlarge-line-height: 1.2;
+--typography-heading-h4-fontSize-line-height: 1.3;
+
+/* Body sizes (legacy names) */
+--body-small: 0.8125rem;
+--body-xlarge: var(--typography-fontSize-lg);
+--typography-body-regular-fontSize-line-height: var(--typography-lineHeight-normal);
+--typography-label-small-fontSize-line-height: 1.35;
+
+/* Font family shorthand (legacy) */
+--font-family-mono: var(--typography-fontFamily-mono);
+--font-weight-mono-light: var(--typography-fontWeight-light);
+--font-weight-mono-regular: var(--typography-fontWeight-normal);
+--font-weight-mono-medium: var(--typography-fontWeight-medium);
+--font-weight-mono-semibold: var(--typography-fontWeight-semibold);
+--font-weight-mono-bold: var(--typography-fontWeight-bold);
+--font-style-mono-normal: normal;
+--font-style-mono-italic: italic;
+
+--font-weight-sans-light: var(--typography-fontWeight-light);
+--font-weight-sans-medium: var(--typography-fontWeight-medium);
+--font-style-sans-normal: normal;
+--font-style-sans-italic: italic;
+}
+
+/* Load once globally — do not import into Lit shadow styles */
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-BoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-LightItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-MediumItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Condensed";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/assets/fonts/IBMPlexSansCondensed-SemiBoldItalic.woff2") format("woff2");
+}
+