monacousa-portal/assets/scss/_design-tokens.scss

// Design Tokens for Bolt.ai Style System
// Based on consensus from multiple AI models for optimal UI transformation

// ============================================
// Color Palette
// ============================================
:root {
  // Primary Colors - Monaco branding
  --color-primary: #dc2626;  // Monaco red for branding
  --color-primary-light: #fef2f2;  // Very light red for accents only
  --color-primary-soft: rgba(220, 38, 38, 0.05);  // Very soft red for hover states
  
  // Background Colors - Clean white/gray
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);  // White to light gray
  
  // Glass Effects - Subtle transparency
  --color-glass-white: rgba(255, 255, 255, 0.6);
  --color-glass-light: rgba(255, 255, 255, 0.8);
  --color-glass-dark: rgba(0, 0, 0, 0.05);
  
  // Text Colors
  --color-text-primary: #27272a;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-white: #ffffff;
  
  // Status Colors
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  // Border Colors
  --color-border-light: rgba(0, 0, 0, 0.05);
  --color-border-medium: rgba(0, 0, 0, 0.1);
  --color-border-white: rgba(255, 255, 255, 0.2);
}

// ============================================
// Spacing System (8-point grid)
// ============================================
$spacing-unit: 8px;

$space-0: 0;
$space-1: $spacing-unit;        // 8px
$space-2: $spacing-unit * 2;    // 16px
$space-3: $spacing-unit * 3;    // 24px
$space-4: $spacing-unit * 4;    // 32px
$space-5: $spacing-unit * 5;    // 40px
$space-6: $spacing-unit * 6;    // 48px
$space-7: $spacing-unit * 7;    // 56px
$space-8: $spacing-unit * 8;    // 64px
$space-10: $spacing-unit * 10;  // 80px
$space-12: $spacing-unit * 12;  // 96px

// ============================================
// Typography Scale
// ============================================
:root {
  // Font Families
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  
  // Font Sizes
  --text-xs: 0.75rem;     // 12px
  --text-sm: 0.875rem;    // 14px
  --text-base: 1rem;      // 16px
  --text-lg: 1.125rem;    // 18px
  --text-xl: 1.25rem;     // 20px
  --text-2xl: 1.5rem;     // 24px
  --text-3xl: 1.875rem;   // 30px
  --text-4xl: 2.25rem;    // 36px
  --text-5xl: 3rem;       // 48px
  
  // Font Weights
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  // Line Heights
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  // Letter Spacing
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
}

// ============================================
// Border Radius
// ============================================
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

// ============================================
// Shadows (Subtle, layered approach)
// ============================================
:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-monaco: 0 8px 24px rgba(220, 38, 38, 0.15);
}

// ============================================
// Glass Effects (Reduced blur for performance)
// ============================================
:root {
  --blur-none: 0;
  --blur-sm: 2px;
  --blur-md: 4px;
  --blur-lg: 8px;  // Maximum blur, use sparingly
}

// ============================================
// Transitions (Consistent timing)
// ============================================
:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

// ============================================
// Z-Index Scale
// ============================================
:root {
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
  --z-max: 9999;
}

// ============================================
// Breakpoints
// ============================================
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// ============================================
// Utility Mixins
// ============================================
@mixin glass-effect($blur: var(--blur-sm), $bg: var(--color-glass-white)) {
  background: $bg;
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid var(--color-border-white);
}

@mixin hover-lift() {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

@mixin text-gradient() {
  background: var(--color-bg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@mixin focus-ring() {
  &:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}