@repobit/dex-system-design 0.10.0 → 0.12.0

package/src/tokens/new-tokens.css

@@ -0,0 +1,698 @@
+/* Design System Tokens - CSS Custom Properties */
+/* Generated from design token files */
+
+: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-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    
+    --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: 1.875rem;    /* 30px */
+    --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;
+    
+    /* ================================
+       CORE COLOR TOKENS
+       ================================ */
+    
+    /* Neutral Colors */
+    --color-neutral-0: #ffffff;
+    --color-neutral-25: #fafafa;
+    --color-neutral-50: #f5f5f5;
+    --color-neutral-100: #e5e5e5;
+    --color-neutral-200: #d4d4d4;
+    --color-neutral-300: #a3a3a3;
+    --color-neutral-400: #737373;
+    --color-neutral-500: #6c7580;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+    
+    /* Blue Colors */
+    --color-blue-50: #eff6ff;
+    --color-blue-100: #dbeafe;
+    --color-blue-200: #bfdbfe;
+    --color-blue-300: #93c5fd;
+    --color-blue-400: #60a5fa;
+    --color-blue-500: #006dff;
+    --color-blue-600: #0059d6;
+    --color-blue-700: #1d4ed8;
+    --color-blue-800: #1e40af;
+    --color-blue-900: #1e3a8a;
+    
+    /* Red Colors */
+    --color-red-50: #fef2f2;
+    --color-red-100: #fee2e2;
+    --color-red-200: #fecaca;
+    --color-red-300: #fca5a5;
+    --color-red-400: #f87171;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-red-900: #7f1d1d;
+    
+    /* Green Colors */
+    --color-green-50: #f0fdf4;
+    --color-green-100: #dcfce7;
+    --color-green-200: #bbf7d0;
+    --color-green-300: #86efac;
+    --color-green-400: #4ade80;
+    --color-green-500: #22c55e;
+    --color-green-600: #16a34a;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-green-900: #14532d;
+    
+    /* Yellow Colors */
+    --color-yellow-50: #fefce8;
+    --color-yellow-100: #fef3c7;
+    --color-yellow-200: #fde68a;
+    --color-yellow-300: #fcd34d;
+    --color-yellow-400: #fbbf24;
+    --color-yellow-500: #f59e0b;
+    --color-yellow-600: #d97706;
+    --color-yellow-700: #b45309;
+    --color-yellow-800: #92400e;
+    --color-yellow-900: #78350f;
+    
+    /* ================================
+       CORE SPACING TOKENS
+       ================================ */
+    
+    --spacing-0: 0;
+    --spacing-4: 0.25rem;      /* 4px */
+    --spacing-8: 0.5rem;       /* 8px */
+    --spacing-12: 0.75rem;      /* 12px */
+    --spacing-16: 1rem;         /* 16px */
+    --spacing-20: 1.25rem;      /* 20px */
+    --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-56: 3.5rem;      /* 56px */
+    --spacing-64: 4rem;        /* 64px */
+    --spacing-80: 5rem;        /* 80px */
+    --spacing-96: 6rem;        /* 96px */
+    --spacing-112: 7rem;        /* 112px */
+    --spacing-128: 8rem;        /* 128px */
+    
+    /* ================================
+       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);
+    
+    /* Focus Shadows - Box Shadow Version */
+    --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 Outlines - Two-Color System for Universal Visibility */
+    --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);
+    
+    /* Traditional Outline Values for Fallback */
+    --focus-outline-traditional: 2px solid var(--color-blue-500);
+    --focus-outline-offset: 2px;
+    
+    /* ================================
+       COMPONENT TOKENS - TYPOGRAPHY
+       ================================ */
+    
+    /* Heading Tokens */
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    /* Body Text Tokens */
+    --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);
+    
+    /* Label Tokens */
+    --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-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);
+    
+    /* Caption Tokens */
+    --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);
+    
+    /* Link Tokens */
+    --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;
+    
+    /* Code Tokens */
+    --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);
+    
+    /* Display Typography Tokens */
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    --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);
+    
+    /* ================================
+       COMPONENT TOKENS - FORM
+       ================================ */
+    
+    /* Form Label Tokens */
+    --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-neutral-900);
+    --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-neutral-900);
+    --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-neutral-900);
+    --form-label-small-marginBottom: var(--spacing-1);
+    
+    --form-label-required-color: var(--color-red-500);
+    --form-label-required-marginLeft: var(--spacing-1);
+    
+    /* Form Input Tokens */
+    --form-input-small-height: var(--dimension-34px);
+    --form-input-small-fontSize: var(--typography-fontSize-sm);
+    --form-input-small-padding: var(--spacing-2) var(--spacing-3);
+    --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-3) var(--spacing-4);
+    --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-4) var(--spacing-5);
+    --form-input-large-borderRadius: var(--radius-lg);
+    
+    --form-input-default-backgroundColor: var(--color-neutral-0);
+    --form-input-default-borderColor: var(--color-neutral-300);
+    --form-input-default-borderWidth: var(--border-width-1);
+    --form-input-default-color: var(--color-neutral-900);
+    --form-input-default-fontFamily: var(--typography-fontFamily-sans);
+    --form-input-default-lineHeight: var(--typography-lineHeight-normal);
+    
+    --form-input-focus-borderColor: var(--color-blue-500);
+    --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-neutral-300);
+    --form-input-disabled-color: var(--color-neutral-500);
+    --form-input-disabled-placeholderColor: var(--color-neutral-400);
+    
+    /* Form Help Text Tokens */
+    --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-neutral-600);
+    --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 Layout Tokens */
+    --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 Tokens */
+    --button-small-height: var(--dimension-34px);
+    --button-small-fontSize: var(--typography-fontSize-sm);
+    --button-small-padding: var(--spacing-2) var(--spacing-3);
+    --button-small-borderRadius: var(--radius-sm);
+    
+    --button-medium-height: var(--dimension-45px);
+    --button-medium-fontSize: var(--typography-fontSize-base);
+    --button-medium-padding: var(--spacing-3) var(--spacing-4);
+    --button-medium-borderRadius: var(--radius-md);
+    
+    --button-large-height: var(--dimension-55px);
+    --button-large-fontSize: var(--typography-fontSize-lg);
+    --button-large-padding: var(--spacing-4) var(--spacing-5);
+    --button-large-borderRadius: var(--radius-lg);
+    
+    /* Button Default State */
+    --button-default-backgroundColor: var(--color-neutral-0);
+    --button-default-borderColor: var(--color-neutral-300);
+    --button-default-borderWidth: var(--border-width-1);
+    --button-default-color: var(--color-neutral-900);
+    --button-default-fontFamily: var(--typography-fontFamily-sans);
+    --button-default-fontWeight: var(--typography-fontWeight-medium);
+    --button-default-lineHeight: var(--typography-lineHeight-normal);
+    
+    /* Button Shared Tokens */
+    --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 Size Tokens */
+    --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-3);
+    --button-size-medium-padding-horizontal: var(--spacing-5);
+    --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 Primary State */
+    --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 State */
+    --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 Tertiary Primary State */
+    --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 Tertiary Secondary State */
+    --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 State */
+    --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 State */
+    --button-empty-background-default: var(--color-neutral-200);
+    --button-empty-text-default: transparent;
+    --button-empty-border-default: var(--color-neutral-200);
+    
+    /* Button Disabled State */
+    --button-disabled-backgroundColor: var(--color-neutral-100);
+    --button-disabled-borderColor: var(--color-neutral-300);
+    --button-disabled-color: var(--color-neutral-500);
+    
+    /* Button Focus State */
+    --button-focus-boxShadow: var(--shadow-focus-outline-blue);
+    
+    /* ================================
+       COMPONENT TOKENS - ANNOTATION
+       ================================ */
+    
+    /* Footnote Tokens */
+    --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 Tokens */
+    --citation-reference-fontSize: inherit;
+    --citation-reference-fontWeight: var(--typography-fontWeight-normal);
+    --citation-reference-lineHeight: inherit;
+    --citation-reference-color: var(--color-blue-600);
+    --citation-reference-textDecoration: underline;
+    --citation-reference-hover-color: var(--color-blue-700);
+    --citation-reference-hover-textDecoration: none;
+    
+    /* Mathematical Notation Tokens */
+    --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 Size Tokens */
+    --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 Context Tokens */
+    --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 State Tokens */
+    --icon-default-color: var(--color-neutral-600);
+    --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);
+}