@bluefly/openstandardagents 0.2.7 → 0.2.8

package/website/styles/_spacing.scss

@@ -1,453 +0,0 @@
-// 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

@@ -1,245 +0,0 @@
-// 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;