@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/styles/_spacing.scss

@@ -0,0 +1,453 @@
+// OSSA Design System - Spacing & Layout System
+// Consistent spacing scale and layout utilities
+
+// ============================================================================
+// SPACING SCALE (4px base unit)
+// ============================================================================
+
+$space-0: 0;
+$space-px: 1px;
+$space-0-5: 0.125rem;   // 2px
+$space-1: 0.25rem;      // 4px
+$space-1-5: 0.375rem;   // 6px
+$space-2: 0.5rem;       // 8px
+$space-2-5: 0.625rem;   // 10px
+$space-3: 0.75rem;      // 12px
+$space-3-5: 0.875rem;   // 14px
+$space-4: 1rem;         // 16px
+$space-5: 1.25rem;      // 20px
+$space-6: 1.5rem;       // 24px
+$space-7: 1.75rem;      // 28px
+$space-8: 2rem;         // 32px
+$space-9: 2.25rem;      // 36px
+$space-10: 2.5rem;      // 40px
+$space-11: 2.75rem;     // 44px
+$space-12: 3rem;        // 48px
+$space-14: 3.5rem;      // 56px
+$space-16: 4rem;        // 64px
+$space-20: 5rem;        // 80px
+$space-24: 6rem;        // 96px
+$space-28: 7rem;        // 112px
+$space-32: 8rem;        // 128px
+$space-36: 9rem;        // 144px
+$space-40: 10rem;       // 160px
+$space-44: 11rem;       // 176px
+$space-48: 12rem;       // 192px
+$space-52: 13rem;       // 208px
+$space-56: 14rem;       // 224px
+$space-60: 15rem;       // 240px
+$space-64: 16rem;       // 256px
+$space-72: 18rem;       // 288px
+$space-80: 20rem;       // 320px
+$space-96: 24rem;       // 384px
+
+// ============================================================================
+// VERTICAL RHYTHM SYSTEM
+// ============================================================================
+
+// Section spacing (vertical rhythm for page sections)
+$section-spacing-sm: $space-12;    // 48px
+$section-spacing-md: $space-16;    // 64px
+$section-spacing-lg: $space-20;    // 80px
+$section-spacing-xl: $space-24;    // 96px
+
+// Component spacing (internal component padding)
+$component-spacing-xs: $space-2;   // 8px
+$component-spacing-sm: $space-3;   // 12px
+$component-spacing-md: $space-4;   // 16px
+$component-spacing-lg: $space-6;   // 24px
+$component-spacing-xl: $space-8;   // 32px
+
+// Element spacing (gaps between elements)
+$element-spacing-xs: $space-1;     // 4px
+$element-spacing-sm: $space-2;     // 8px
+$element-spacing-md: $space-3;     // 12px
+$element-spacing-lg: $space-4;     // 16px
+$element-spacing-xl: $space-6;     // 24px
+
+// ============================================================================
+// CONTAINER MAX-WIDTHS
+// ============================================================================
+
+$container-sm: 640px;
+$container-md: 768px;
+$container-lg: 1024px;
+$container-xl: 1280px;
+$container-2xl: 1536px;
+
+// Content max-widths (for readable text)
+$content-sm: 36rem;    // 576px
+$content-md: 42rem;    // 672px
+$content-lg: 48rem;    // 768px
+$content-xl: 56rem;    // 896px
+$content-2xl: 64rem;   // 1024px
+$content-3xl: 72rem;   // 1152px
+$content-4xl: 80rem;   // 1280px
+
+// ============================================================================
+// SPACING MIXINS
+// ============================================================================
+
+// Section spacing mixin
+@mixin section-spacing($size: 'md') {
+  @if $size == 'sm' {
+    padding-top: $section-spacing-sm;
+    padding-bottom: $section-spacing-sm;
+  } @else if $size == 'md' {
+    padding-top: $section-spacing-md;
+    padding-bottom: $section-spacing-md;
+  } @else if $size == 'lg' {
+    padding-top: $section-spacing-lg;
+    padding-bottom: $section-spacing-lg;
+  } @else if $size == 'xl' {
+    padding-top: $section-spacing-xl;
+    padding-bottom: $section-spacing-xl;
+  }
+}
+
+// Container mixin with responsive padding
+@mixin container($max-width: $container-xl) {
+  width: 100%;
+  max-width: $max-width;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $space-4;
+  padding-right: $space-4;
+  
+  @media (min-width: 640px) {
+    padding-left: $space-6;
+    padding-right: $space-6;
+  }
+  
+  @media (min-width: 1024px) {
+    padding-left: $space-8;
+    padding-right: $space-8;
+  }
+}
+
+// Content container (for readable text)
+@mixin content-container($max-width: $content-2xl) {
+  width: 100%;
+  max-width: $max-width;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Stack spacing (vertical spacing between elements)
+@mixin stack($gap: $space-4) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+// Inline spacing (horizontal spacing between elements)
+@mixin inline($gap: $space-4) {
+  display: flex;
+  flex-direction: row;
+  gap: $gap;
+}
+
+// Grid spacing
+@mixin grid($columns: 1, $gap: $space-4) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+}
+
+// ============================================================================
+// UTILITY CLASSES
+// ============================================================================
+
+// Container classes
+.container {
+  @include container;
+}
+
+.container-sm {
+  @include container($container-sm);
+}
+
+.container-md {
+  @include container($container-md);
+}
+
+.container-lg {
+  @include container($container-lg);
+}
+
+.container-xl {
+  @include container($container-xl);
+}
+
+.container-2xl {
+  @include container($container-2xl);
+}
+
+// Content container classes
+.content-container {
+  @include content-container;
+}
+
+.content-sm {
+  @include content-container($content-sm);
+}
+
+.content-md {
+  @include content-container($content-md);
+}
+
+.content-lg {
+  @include content-container($content-lg);
+}
+
+.content-xl {
+  @include content-container($content-xl);
+}
+
+.content-2xl {
+  @include content-container($content-2xl);
+}
+
+.content-3xl {
+  @include content-container($content-3xl);
+}
+
+.content-4xl {
+  @include content-container($content-4xl);
+}
+
+// Section spacing classes
+.section-sm {
+  @include section-spacing('sm');
+}
+
+.section-md {
+  @include section-spacing('md');
+}
+
+.section-lg {
+  @include section-spacing('lg');
+}
+
+.section-xl {
+  @include section-spacing('xl');
+}
+
+// Stack classes
+.stack-xs {
+  @include stack($element-spacing-xs);
+}
+
+.stack-sm {
+  @include stack($element-spacing-sm);
+}
+
+.stack-md {
+  @include stack($element-spacing-md);
+}
+
+.stack-lg {
+  @include stack($element-spacing-lg);
+}
+
+.stack-xl {
+  @include stack($element-spacing-xl);
+}
+
+// Inline classes
+.inline-xs {
+  @include inline($element-spacing-xs);
+}
+
+.inline-sm {
+  @include inline($element-spacing-sm);
+}
+
+.inline-md {
+  @include inline($element-spacing-md);
+}
+
+.inline-lg {
+  @include inline($element-spacing-lg);
+}
+
+.inline-xl {
+  @include inline($element-spacing-xl);
+}
+
+// Margin utilities (using spacing scale)
+.m-0 { margin: $space-0; }
+.m-1 { margin: $space-1; }
+.m-2 { margin: $space-2; }
+.m-3 { margin: $space-3; }
+.m-4 { margin: $space-4; }
+.m-5 { margin: $space-5; }
+.m-6 { margin: $space-6; }
+.m-8 { margin: $space-8; }
+.m-10 { margin: $space-10; }
+.m-12 { margin: $space-12; }
+.m-16 { margin: $space-16; }
+.m-20 { margin: $space-20; }
+.m-24 { margin: $space-24; }
+
+// Margin top
+.mt-0 { margin-top: $space-0; }
+.mt-1 { margin-top: $space-1; }
+.mt-2 { margin-top: $space-2; }
+.mt-3 { margin-top: $space-3; }
+.mt-4 { margin-top: $space-4; }
+.mt-5 { margin-top: $space-5; }
+.mt-6 { margin-top: $space-6; }
+.mt-8 { margin-top: $space-8; }
+.mt-10 { margin-top: $space-10; }
+.mt-12 { margin-top: $space-12; }
+.mt-16 { margin-top: $space-16; }
+.mt-20 { margin-top: $space-20; }
+.mt-24 { margin-top: $space-24; }
+
+// Margin bottom
+.mb-0 { margin-bottom: $space-0; }
+.mb-1 { margin-bottom: $space-1; }
+.mb-2 { margin-bottom: $space-2; }
+.mb-3 { margin-bottom: $space-3; }
+.mb-4 { margin-bottom: $space-4; }
+.mb-5 { margin-bottom: $space-5; }
+.mb-6 { margin-bottom: $space-6; }
+.mb-8 { margin-bottom: $space-8; }
+.mb-10 { margin-bottom: $space-10; }
+.mb-12 { margin-bottom: $space-12; }
+.mb-16 { margin-bottom: $space-16; }
+.mb-20 { margin-bottom: $space-20; }
+.mb-24 { margin-bottom: $space-24; }
+
+// Margin left
+.ml-0 { margin-left: $space-0; }
+.ml-1 { margin-left: $space-1; }
+.ml-2 { margin-left: $space-2; }
+.ml-3 { margin-left: $space-3; }
+.ml-4 { margin-left: $space-4; }
+.ml-6 { margin-left: $space-6; }
+.ml-8 { margin-left: $space-8; }
+
+// Margin right
+.mr-0 { margin-right: $space-0; }
+.mr-1 { margin-right: $space-1; }
+.mr-2 { margin-right: $space-2; }
+.mr-3 { margin-right: $space-3; }
+.mr-4 { margin-right: $space-4; }
+.mr-6 { margin-right: $space-6; }
+.mr-8 { margin-right: $space-8; }
+
+// Margin horizontal
+.mx-0 { margin-left: $space-0; margin-right: $space-0; }
+.mx-1 { margin-left: $space-1; margin-right: $space-1; }
+.mx-2 { margin-left: $space-2; margin-right: $space-2; }
+.mx-3 { margin-left: $space-3; margin-right: $space-3; }
+.mx-4 { margin-left: $space-4; margin-right: $space-4; }
+.mx-6 { margin-left: $space-6; margin-right: $space-6; }
+.mx-8 { margin-left: $space-8; margin-right: $space-8; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+// Margin vertical
+.my-0 { margin-top: $space-0; margin-bottom: $space-0; }
+.my-1 { margin-top: $space-1; margin-bottom: $space-1; }
+.my-2 { margin-top: $space-2; margin-bottom: $space-2; }
+.my-3 { margin-top: $space-3; margin-bottom: $space-3; }
+.my-4 { margin-top: $space-4; margin-bottom: $space-4; }
+.my-6 { margin-top: $space-6; margin-bottom: $space-6; }
+.my-8 { margin-top: $space-8; margin-bottom: $space-8; }
+.my-12 { margin-top: $space-12; margin-bottom: $space-12; }
+.my-16 { margin-top: $space-16; margin-bottom: $space-16; }
+
+// Padding utilities (using spacing scale)
+.p-0 { padding: $space-0; }
+.p-1 { padding: $space-1; }
+.p-2 { padding: $space-2; }
+.p-3 { padding: $space-3; }
+.p-4 { padding: $space-4; }
+.p-5 { padding: $space-5; }
+.p-6 { padding: $space-6; }
+.p-8 { padding: $space-8; }
+.p-10 { padding: $space-10; }
+.p-12 { padding: $space-12; }
+.p-16 { padding: $space-16; }
+.p-20 { padding: $space-20; }
+.p-24 { padding: $space-24; }
+
+// Padding top
+.pt-0 { padding-top: $space-0; }
+.pt-1 { padding-top: $space-1; }
+.pt-2 { padding-top: $space-2; }
+.pt-3 { padding-top: $space-3; }
+.pt-4 { padding-top: $space-4; }
+.pt-6 { padding-top: $space-6; }
+.pt-8 { padding-top: $space-8; }
+.pt-12 { padding-top: $space-12; }
+.pt-16 { padding-top: $space-16; }
+.pt-20 { padding-top: $space-20; }
+.pt-24 { padding-top: $space-24; }
+
+// Padding bottom
+.pb-0 { padding-bottom: $space-0; }
+.pb-1 { padding-bottom: $space-1; }
+.pb-2 { padding-bottom: $space-2; }
+.pb-3 { padding-bottom: $space-3; }
+.pb-4 { padding-bottom: $space-4; }
+.pb-6 { padding-bottom: $space-6; }
+.pb-8 { padding-bottom: $space-8; }
+.pb-12 { padding-bottom: $space-12; }
+.pb-16 { padding-bottom: $space-16; }
+.pb-20 { padding-bottom: $space-20; }
+.pb-24 { padding-bottom: $space-24; }
+
+// Padding left
+.pl-0 { padding-left: $space-0; }
+.pl-1 { padding-left: $space-1; }
+.pl-2 { padding-left: $space-2; }
+.pl-3 { padding-left: $space-3; }
+.pl-4 { padding-left: $space-4; }
+.pl-6 { padding-left: $space-6; }
+.pl-8 { padding-left: $space-8; }
+
+// Padding right
+.pr-0 { padding-right: $space-0; }
+.pr-1 { padding-right: $space-1; }
+.pr-2 { padding-right: $space-2; }
+.pr-3 { padding-right: $space-3; }
+.pr-4 { padding-right: $space-4; }
+.pr-6 { padding-right: $space-6; }
+.pr-8 { padding-right: $space-8; }
+
+// Padding horizontal
+.px-0 { padding-left: $space-0; padding-right: $space-0; }
+.px-1 { padding-left: $space-1; padding-right: $space-1; }
+.px-2 { padding-left: $space-2; padding-right: $space-2; }
+.px-3 { padding-left: $space-3; padding-right: $space-3; }
+.px-4 { padding-left: $space-4; padding-right: $space-4; }
+.px-6 { padding-left: $space-6; padding-right: $space-6; }
+.px-8 { padding-left: $space-8; padding-right: $space-8; }
+
+// Padding vertical
+.py-0 { padding-top: $space-0; padding-bottom: $space-0; }
+.py-1 { padding-top: $space-1; padding-bottom: $space-1; }
+.py-2 { padding-top: $space-2; padding-bottom: $space-2; }
+.py-3 { padding-top: $space-3; padding-bottom: $space-3; }
+.py-4 { padding-top: $space-4; padding-bottom: $space-4; }
+.py-6 { padding-top: $space-6; padding-bottom: $space-6; }
+.py-8 { padding-top: $space-8; padding-bottom: $space-8; }
+.py-12 { padding-top: $space-12; padding-bottom: $space-12; }
+.py-16 { padding-top: $space-16; padding-bottom: $space-16; }
+.py-20 { padding-top: $space-20; padding-bottom: $space-20; }
+
+// Gap utilities (for flexbox and grid)
+.gap-0 { gap: $space-0; }
+.gap-1 { gap: $space-1; }
+.gap-2 { gap: $space-2; }
+.gap-3 { gap: $space-3; }
+.gap-4 { gap: $space-4; }
+.gap-5 { gap: $space-5; }
+.gap-6 { gap: $space-6; }
+.gap-8 { gap: $space-8; }
+.gap-10 { gap: $space-10; }
+.gap-12 { gap: $space-12; }
+.gap-16 { gap: $space-16; }

package/website/styles/_tokens.scss

@@ -0,0 +1,245 @@
+// OSSA Design System - Design Tokens
+// Complete color scales, gradients, and design tokens
+
+// ============================================================================
+// COLOR SCALES (50-900)
+// ============================================================================
+
+// Primary Color Scale (Blue-Purple #4A3ECD)
+$ossa-primary-50: #f5f4fd;
+$ossa-primary-100: #e8e5fa;
+$ossa-primary-200: #d4cff5;
+$ossa-primary-300: #b5abee;
+$ossa-primary-400: #8f7ee4;
+$ossa-primary-500: #4A3ECD; // Base primary color
+$ossa-primary-600: #3d2fb8;
+$ossa-primary-700: #322598;
+$ossa-primary-800: #2a1f7a;
+$ossa-primary-900: #241f65;
+$ossa-primary-950: #15113a;
+
+// Secondary Color Scale (Cyan-Blue #1CB9ED)
+$ossa-secondary-50: #ecfbff;
+$ossa-secondary-100: #d1f5fe;
+$ossa-secondary-200: #a8e9fd;
+$ossa-secondary-300: #6fd8fa;
+$ossa-secondary-400: #2ec0f5;
+$ossa-secondary-500: #1CB9ED; // Base secondary color
+$ossa-secondary-600: #0a9dd1;
+$ossa-secondary-700: #087da9;
+$ossa-secondary-800: #0c6688;
+$ossa-secondary-900: #105570;
+$ossa-secondary-950: #08374a;
+
+// Accent Color Scale (Purple #9060EA)
+$ossa-accent-50: #f7f4fe;
+$ossa-accent-100: #ede9fd;
+$ossa-accent-200: #ddd4fb;
+$ossa-accent-300: #c5b3f8;
+$ossa-accent-400: #a887f3;
+$ossa-accent-500: #9060EA; // Base accent color
+$ossa-accent-600: #7c3aed;
+$ossa-accent-700: #6b28d9;
+$ossa-accent-800: #5923b8;
+$ossa-accent-900: #4b1f97;
+$ossa-accent-950: #2d0f5c;
+
+// Success Color Scale (Green #10b981)
+$ossa-success-50: #ecfdf5;
+$ossa-success-100: #d1fae5;
+$ossa-success-200: #a7f3d0;
+$ossa-success-300: #6ee7b7;
+$ossa-success-400: #34d399;
+$ossa-success-500: #10b981; // Base success color
+$ossa-success-600: #059669;
+$ossa-success-700: #047857;
+$ossa-success-800: #065f46;
+$ossa-success-900: #064e3b;
+$ossa-success-950: #022c22;
+
+// Warning Color Scale (Amber #f59e0b)
+$ossa-warning-50: #fffbeb;
+$ossa-warning-100: #fef3c7;
+$ossa-warning-200: #fde68a;
+$ossa-warning-300: #fcd34d;
+$ossa-warning-400: #fbbf24;
+$ossa-warning-500: #f59e0b; // Base warning color
+$ossa-warning-600: #d97706;
+$ossa-warning-700: #b45309;
+$ossa-warning-800: #92400e;
+$ossa-warning-900: #78350f;
+$ossa-warning-950: #451a03;
+
+// Error Color Scale (Red #ef4444)
+$ossa-error-50: #fef2f2;
+$ossa-error-100: #fee2e2;
+$ossa-error-200: #fecaca;
+$ossa-error-300: #fca5a5;
+$ossa-error-400: #f87171;
+$ossa-error-500: #ef4444; // Base error color
+$ossa-error-600: #dc2626;
+$ossa-error-700: #b91c1c;
+$ossa-error-800: #991b1b;
+$ossa-error-900: #7f1d1d;
+$ossa-error-950: #450a0a;
+
+// Info Color Scale (Cyan #06b6d4)
+$ossa-info-50: #ecfeff;
+$ossa-info-100: #cffafe;
+$ossa-info-200: #a5f3fc;
+$ossa-info-300: #67e8f9;
+$ossa-info-400: #22d3ee;
+$ossa-info-500: #06b6d4; // Base info color
+$ossa-info-600: #0891b2;
+$ossa-info-700: #0e7490;
+$ossa-info-800: #155e75;
+$ossa-info-900: #164e63;
+$ossa-info-950: #083344;
+
+// Neutral/Gray Color Scale
+$ossa-gray-50: #f9fafb;
+$ossa-gray-100: #f3f4f6;
+$ossa-gray-200: #e5e7eb;
+$ossa-gray-300: #d1d5db;
+$ossa-gray-400: #9ca3af;
+$ossa-gray-500: #6b7280;
+$ossa-gray-600: #4b5563;
+$ossa-gray-700: #374151;
+$ossa-gray-800: #1f2937;
+$ossa-gray-900: #111827;
+$ossa-gray-950: #030712;
+
+// ============================================================================
+// DARK MODE COLOR MAPPINGS (Future-ready)
+// ============================================================================
+
+// Dark mode will invert the color scales
+// Light backgrounds (50-100) become dark (900-950)
+// Dark text (900-950) becomes light (50-100)
+
+$ossa-dark-bg-primary: $ossa-gray-900;
+$ossa-dark-bg-secondary: $ossa-gray-800;
+$ossa-dark-bg-tertiary: $ossa-gray-700;
+$ossa-dark-text-primary: $ossa-gray-50;
+$ossa-dark-text-secondary: $ossa-gray-300;
+$ossa-dark-text-tertiary: $ossa-gray-400;
+
+// ============================================================================
+// GRADIENT TOKENS (CSS Custom Properties)
+// ============================================================================
+
+// Primary gradient (Purple spectrum)
+$gradient-primary: linear-gradient(135deg, $ossa-primary-500 0%, $ossa-accent-600 100%);
+
+// Secondary gradient (Blue to Cyan)
+$gradient-secondary: linear-gradient(135deg, $ossa-secondary-500 0%, $ossa-info-500 100%);
+
+// Accent gradient (Purple to Pink)
+$gradient-accent: linear-gradient(135deg, $ossa-accent-500 0%, #ec4899 100%);
+
+// Hero gradient (Full spectrum - Blue to Purple)
+$gradient-hero: linear-gradient(135deg, $ossa-secondary-500 0%, $ossa-primary-500 50%, $ossa-accent-500 100%);
+
+// Button gradient (Subtle blue to purple)
+$gradient-button: linear-gradient(135deg, $ossa-secondary-400 0%, $ossa-primary-500 100%);
+
+// Success gradient
+$gradient-success: linear-gradient(135deg, $ossa-success-400 0%, $ossa-success-600 100%);
+
+// Warning gradient
+$gradient-warning: linear-gradient(135deg, $ossa-warning-400 0%, $ossa-warning-600 100%);
+
+// Error gradient
+$gradient-error: linear-gradient(135deg, $ossa-error-400 0%, $ossa-error-600 100%);
+
+// Info gradient
+$gradient-info: linear-gradient(135deg, $ossa-info-400 0%, $ossa-info-600 100%);
+
+// Subtle background gradients
+$gradient-bg-light: linear-gradient(180deg, $ossa-gray-50 0%, $ossa-gray-100 100%);
+$gradient-bg-primary: linear-gradient(180deg, $ossa-primary-50 0%, $ossa-primary-100 100%);
+$gradient-bg-secondary: linear-gradient(180deg, $ossa-secondary-50 0%, $ossa-secondary-100 100%);
+
+// ============================================================================
+// FOCUS RING COLORS (Accessibility)
+// ============================================================================
+
+$focus-ring-primary: $ossa-primary-500;
+$focus-ring-secondary: $ossa-secondary-500;
+$focus-ring-accent: $ossa-accent-500;
+$focus-ring-error: $ossa-error-500;
+$focus-ring-success: $ossa-success-500;
+
+// Focus ring with opacity for layering
+$focus-ring-primary-alpha: rgba($ossa-primary-500, 0.5);
+$focus-ring-secondary-alpha: rgba($ossa-secondary-500, 0.5);
+$focus-ring-accent-alpha: rgba($ossa-accent-500, 0.5);
+
+// ============================================================================
+// SHADOW TOKENS
+// ============================================================================
+
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+// Colored shadows for emphasis
+$shadow-primary: 0 10px 15px -3px rgba($ossa-primary-500, 0.2), 0 4px 6px -2px rgba($ossa-primary-500, 0.1);
+$shadow-secondary: 0 10px 15px -3px rgba($ossa-secondary-500, 0.2), 0 4px 6px -2px rgba($ossa-secondary-500, 0.1);
+$shadow-accent: 0 10px 15px -3px rgba($ossa-accent-500, 0.2), 0 4px 6px -2px rgba($ossa-accent-500, 0.1);
+
+// ============================================================================
+// BORDER RADIUS TOKENS
+// ============================================================================
+
+$radius-none: 0;
+$radius-sm: 0.125rem;   // 2px
+$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;   // Full circle
+
+// ============================================================================
+// TRANSITION TOKENS
+// ============================================================================
+
+$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+
+// ============================================================================
+// Z-INDEX TOKENS
+// ============================================================================
+
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+
+// ============================================================================
+// OPACITY TOKENS
+// ============================================================================
+
+$opacity-0: 0;
+$opacity-5: 0.05;
+$opacity-10: 0.1;
+$opacity-20: 0.2;
+$opacity-25: 0.25;
+$opacity-30: 0.3;
+$opacity-40: 0.4;
+$opacity-50: 0.5;
+$opacity-60: 0.6;
+$opacity-70: 0.7;
+$opacity-75: 0.75;
+$opacity-80: 0.8;
+$opacity-90: 0.9;
+$opacity-95: 0.95;
+$opacity-100: 1;