@repobit/dex-system-design 0.23.95 → 0.23.96

package/src/blog/src/tokens/core.js

@@ -0,0 +1,811 @@
+/** Core design system tokens — source of truth. Run npm run build:tokens to sync tokens.css */
+export const coreTokens = `
+/* ================================
+     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);
+`;