Spaces:
Sleeping
Sleeping
| /* SAAP Design System - CSS Implementation with Tailwind CSS | |
| Based on docs/design/saap-design-system.tex | |
| Design Tokens for Vue.js Components | |
| */ | |
| /* Font Imports MUST BE FIRST */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); | |
| /* Tailwind CSS Imports */ | |
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* CSS Custom Properties - Design Tokens */ | |
| :root { | |
| /* === SAAP COLOR SYSTEM === */ | |
| /* Primary Blue Palette */ | |
| --saap-primary-50: #EFF6FF; | |
| --saap-primary-100: #DBEAFE; | |
| --saap-primary-200: #BFDBFE; | |
| --saap-primary-300: #93C5FD; | |
| --saap-primary-400: #60A5FA; | |
| --saap-primary-500: #3B82F6; | |
| --saap-primary-600: #2563EB; /* Core Primary */ | |
| --saap-primary-700: #1D4ED8; | |
| --saap-primary-800: #1E40AF; | |
| --saap-primary-900: #1E3A8A; | |
| /* Secondary Green Palette */ | |
| --saap-secondary-50: #F0FDF4; | |
| --saap-secondary-100: #DCFCE7; | |
| --saap-secondary-200: #BBF7D0; | |
| --saap-secondary-300: #86EFAC; | |
| --saap-secondary-400: #4ADE80; | |
| --saap-secondary-500: #22C55E; | |
| --saap-secondary-600: #16A34A; /* Core Secondary */ | |
| --saap-secondary-700: #15803D; | |
| --saap-secondary-800: #166534; | |
| --saap-secondary-900: #14532D; | |
| /* Accent Orange Palette */ | |
| --saap-accent-50: #FFF7ED; | |
| --saap-accent-100: #FFEDD5; | |
| --saap-accent-200: #FED7AA; | |
| --saap-accent-300: #FDBA74; | |
| --saap-accent-400: #FB923C; | |
| --saap-accent-500: #F97316; /* Core Accent */ | |
| --saap-accent-600: #EA580C; | |
| --saap-accent-700: #C2410C; | |
| --saap-accent-800: #9A3412; | |
| --saap-accent-900: #7C2D12; | |
| /* Neutral Palette */ | |
| --saap-gray-50: #F9FAFB; | |
| --saap-gray-100: #F3F4F6; | |
| --saap-gray-200: #E5E7EB; | |
| --saap-gray-300: #D1D5DB; | |
| --saap-gray-400: #9CA3AF; | |
| --saap-gray-500: #6B7280; | |
| --saap-gray-600: #4B5563; | |
| --saap-gray-700: #374151; | |
| --saap-gray-800: #1F2937; | |
| --saap-gray-900: #111827; | |
| /* Agent-Specific Colors */ | |
| --saap-jane: #8B5CF6; /* Purple - Lead Coordinator */ | |
| --saap-john: #14B8A6; /* Teal - Developer */ | |
| --saap-lara: #EC4899; /* Pink - Medical Expert */ | |
| --saap-justus: #F59E0B; /* Gold - Legal Expert */ | |
| --saap-theo: #EF4444; /* Red - Finance */ | |
| --saap-leon: #10B981; /* Emerald - System */ | |
| --saap-luna: #8B5A2B; /* Brown - Coaching */ | |
| /* === TYPOGRAPHY SYSTEM === */ | |
| /* Font Families */ | |
| --saap-font-sans: 'Inter', system-ui, -apple-system, sans-serif; | |
| --saap-font-mono: 'Fira Code', 'Monaco', 'Cascadia Code', monospace; | |
| /* Modular Scale 1.250 */ | |
| --saap-text-xs: 0.75rem; /* 12px */ | |
| --saap-text-sm: 0.875rem; /* 14px */ | |
| --saap-text-base: 1rem; /* 16px */ | |
| --saap-text-lg: 1.125rem; /* 18px */ | |
| --saap-text-xl: 1.25rem; /* 20px */ | |
| --saap-text-2xl: 1.5rem; /* 24px */ | |
| --saap-text-3xl: 1.875rem; /* 30px */ | |
| --saap-text-4xl: 2.25rem; /* 36px */ | |
| --saap-text-5xl: 3rem; /* 48px */ | |
| /* Font Weights */ | |
| --saap-font-light: 300; | |
| --saap-font-normal: 400; | |
| --saap-font-medium: 500; | |
| --saap-font-semibold: 600; | |
| --saap-font-bold: 700; | |
| /* Line Heights */ | |
| --saap-leading-tight: 1.25; | |
| --saap-leading-snug: 1.375; | |
| --saap-leading-normal: 1.5; | |
| --saap-leading-relaxed: 1.625; | |
| /* === SPACING SYSTEM === */ | |
| /* 8pt Grid System (4px base unit) */ | |
| --saap-space-1: 0.25rem; /* 4px */ | |
| --saap-space-2: 0.5rem; /* 8px */ | |
| --saap-space-3: 0.75rem; /* 12px */ | |
| --saap-space-4: 1rem; /* 16px */ | |
| --saap-space-5: 1.25rem; /* 20px */ | |
| --saap-space-6: 1.5rem; /* 24px */ | |
| --saap-space-8: 2rem; /* 32px */ | |
| --saap-space-10: 2.5rem; /* 40px */ | |
| --saap-space-12: 3rem; /* 48px */ | |
| --saap-space-16: 4rem; /* 64px */ | |
| --saap-space-20: 5rem; /* 80px */ | |
| /* === ELEVATION SYSTEM === */ | |
| /* Shadow Levels */ | |
| --saap-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --saap-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| --saap-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --saap-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --saap-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| /* === BORDER RADIUS === */ | |
| --saap-radius-sm: 0.125rem; /* 2px */ | |
| --saap-radius-base: 0.25rem; /* 4px */ | |
| --saap-radius-md: 0.375rem; /* 6px */ | |
| --saap-radius-lg: 0.5rem; /* 8px */ | |
| --saap-radius-xl: 0.75rem; /* 12px */ | |
| --saap-radius-full: 9999px; | |
| /* === TRANSITIONS === */ | |
| --saap-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --saap-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --saap-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* === GLOBAL STYLES === */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| line-height: 1.5; | |
| } | |
| body { | |
| font-family: var(--saap-font-sans); | |
| font-size: var(--saap-text-base); | |
| font-weight: var(--saap-font-normal); | |
| line-height: var(--saap-leading-normal); | |
| color: var(--saap-gray-900); | |
| background-color: var(--saap-gray-50); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| #app { | |
| min-height: 100vh; | |
| } | |
| /* === TYPOGRAPHY UTILITIES === */ | |
| .saap-heading-1 { | |
| font-size: var(--saap-text-4xl); | |
| font-weight: var(--saap-font-bold); | |
| line-height: var(--saap-leading-tight); | |
| color: var(--saap-gray-900); | |
| } | |
| .saap-heading-2 { | |
| font-size: var(--saap-text-3xl); | |
| font-weight: var(--saap-font-semibold); | |
| line-height: var(--saap-leading-tight); | |
| color: var(--saap-gray-900); | |
| } | |
| .saap-heading-3 { | |
| font-size: var(--saap-text-2xl); | |
| font-weight: var(--saap-font-semibold); | |
| line-height: var(--saap-leading-snug); | |
| color: var(--saap-gray-800); | |
| } | |
| .saap-body-large { | |
| font-size: var(--saap-text-lg); | |
| font-weight: var(--saap-font-normal); | |
| line-height: var(--saap-leading-relaxed); | |
| color: var(--saap-gray-700); | |
| } | |
| .saap-body { | |
| font-size: var(--saap-text-base); | |
| font-weight: var(--saap-font-normal); | |
| line-height: var(--saap-leading-normal); | |
| color: var(--saap-gray-600); | |
| } | |
| .saap-body-small { | |
| font-size: var(--saap-text-sm); | |
| font-weight: var(--saap-font-normal); | |
| line-height: var(--saap-leading-normal); | |
| color: var(--saap-gray-500); | |
| } | |
| .saap-mono { | |
| font-family: var(--saap-font-mono); | |
| font-size: var(--saap-text-sm); | |
| } | |
| /* === COMPONENT UTILITIES === */ | |
| @layer components { | |
| .saap-card { | |
| @apply bg-white rounded-lg shadow-base border border-gray-200; | |
| } | |
| .saap-button-primary { | |
| @apply inline-flex items-center px-6 py-3 rounded-md text-sm font-medium; | |
| @apply bg-blue-600 text-white hover:bg-blue-700; | |
| @apply transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed; | |
| } | |
| .saap-button-secondary { | |
| @apply inline-flex items-center px-6 py-3 rounded-md text-sm font-medium; | |
| @apply bg-gray-100 text-gray-700 border border-gray-300; | |
| @apply hover:bg-gray-200 hover:border-gray-400; | |
| @apply transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed; | |
| } | |
| } | |
| /* === AGENT COLOR UTILITIES === */ | |
| .agent-jane { color: var(--saap-jane); } | |
| .agent-john { color: var(--saap-john); } | |
| .agent-lara { color: var(--saap-lara); } | |
| .agent-justus { color: var(--saap-justus); } | |
| .agent-theo { color: var(--saap-theo); } | |
| .agent-leon { color: var(--saap-leon); } | |
| .agent-luna { color: var(--saap-luna); } | |
| .bg-agent-jane { background-color: var(--saap-jane); } | |
| .bg-agent-john { background-color: var(--saap-john); } | |
| .bg-agent-lara { background-color: var(--saap-lara); } | |
| .bg-agent-justus { background-color: var(--saap-justus); } | |
| .bg-agent-theo { background-color: var(--saap-theo); } | |
| .bg-agent-leon { background-color: var(--saap-leon); } | |
| .bg-agent-luna { background-color: var(--saap-luna); } |