/** * The Therapist AI - Design System * CSS Custom Properties (Design Tokens) * * Usage: Import this file at the root of your application * Dark mode: Add [data-theme="dark"] to or */ /* ===== FONTS ===== */ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..900;1,200..900&display=swap'); :root { /* ===== COLOR PALETTE - LIGHT MODE ===== */ --color-primary: #0e2c25; --color-primary-light: #4c9c8a; --color-primary-lighter: #7BC4B8; --color-primary-dark: #0a1f1a; --color-background: #e8e3ce; --color-surface: #f0ede0; --color-surface-elevated: #FFFFFF; --color-text: #2D2D2D; --color-text-secondary: #5A5A5A; --color-text-muted: #8A8A8A; --color-text-inverse: #FFFFFF; --color-border: #d0cbb8; --color-border-light: #dcd7c4; /* Accent Color */ --color-accent: #4c9c8a; /* Semantic Colors */ --color-success: #2E7D32; --color-success-light: #E8F5E9; --color-warning: #ED6C02; --color-warning-light: #FFF4E5; --color-error: #D32F2F; --color-error-light: #FFEBEE; --color-info: #0288D1; --color-info-light: #E1F5FE; /* Chat Bubbles */ --color-ai-bubble: #f0ede0; --color-user-bubble: #0e2c25; /* Input & Overlay */ --color-input-bg: #FFFFFF; --color-overlay: rgba(14, 44, 37, 0.5); /* ===== TYPOGRAPHY ===== */ --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Font Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Line Heights */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; /* Font Weights */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Letter Spacing */ --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.01em; --tracking-wider: 0.02em; /* ===== SPACING ===== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ===== BORDER RADIUS ===== */ --radius-none: 0; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-sm: 0 1px 2px rgba(27, 59, 54, 0.05); --shadow-md: 0 2px 8px rgba(27, 59, 54, 0.08); --shadow-lg: 0 4px 16px rgba(27, 59, 54, 0.1); --shadow-xl: 0 8px 24px rgba(27, 59, 54, 0.12); --shadow-inner: inset 0 2px 4px rgba(27, 59, 54, 0.06); --shadow-focus: 0 0 0 3px rgba(91, 168, 157, 0.4); /* ===== TRANSITIONS ===== */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-ios: cubic-bezier(0.36, 0.66, 0.04, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ===== COMPONENT TOKENS ===== */ /* Buttons */ --button-height-sm: 44px; --button-height-md: 48px; --button-height-lg: 56px; --button-radius: var(--radius-lg); --button-min-touch: 48px; /* Inputs */ --input-height: 52px; --input-padding: 14px 18px; --input-radius: var(--radius-lg); --input-border-width: 1.5px; --input-min-touch: 48px; /* Cards */ --card-padding: var(--space-5); --card-radius: var(--radius-xl); /* Chat Bubbles */ --bubble-max-width: 85%; --bubble-padding: 12px 16px; --bubble-radius: 20px; --bubble-corner-radius: 4px; /* Bottom Navigation */ --nav-height: 64px; /* Safe Area Insets */ --safe-area-top: env(safe-area-inset-top); --safe-area-right: env(safe-area-inset-right); --safe-area-bottom: env(safe-area-inset-bottom); --safe-area-left: env(safe-area-inset-left); /* ===== Z-INDEX ===== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ===== EMOTIONAL STATE COLORS ===== */ --emotion-calm: rgba(76, 156, 138, 0.05); --emotion-anxious: rgba(237, 108, 2, 0.03); --emotion-sad: rgba(100, 100, 120, 0.04); --emotion-hopeful: rgba(255, 235, 200, 0.06); /* ===== MOOD VISUALIZATION COLORS ===== */ --mood-excellent: #4ade80; --mood-good: #60a5fa; --mood-neutral: #fbbf24; --mood-poor: #f87171; --mood-crisis: #ef4444; /* ===== THERAPY-SPECIFIC TYPOGRAPHY ===== */ --text-therapy-base: 1.125rem; --leading-therapy: 1.75; --tracking-therapy: 0.01em; /* ===== ANIMATION DURATIONS (Calming) ===== */ --duration-breathe: 4s; --duration-calming: 600ms; --duration-typing-calm: 600ms; --duration-typing-anxious: 900ms; --duration-typing-crisis: 300ms; /* ===== CRISIS UI ===== */ --crisis-button-min-height: 72px; --crisis-touch-target: 72px; /* ===== DISTRESS MODE ===== */ --distress-text-size: 1.25rem; --distress-line-height: 1.75; --distress-touch-target: 72px; } /* ===== DARK MODE ===== */ [data-theme="dark"] { --color-primary: #4c9c8a; --color-primary-light: #7BC4B8; --color-primary-lighter: #9DD5CB; --color-primary-dark: #3a7a6b; --color-background: #121212; --color-surface: #1A1A1A; --color-surface-elevated: #242424; --color-text: #F5F5F5; --color-text-secondary: #B0B0B0; --color-text-muted: #757575; --color-text-inverse: #0e2c25; --color-border: #333333; --color-border-light: #2A2A2A; --color-accent: #4c9c8a; --color-success: #66BB6A; --color-success-light: #1B2E1C; --color-warning: #FFA726; --color-warning-light: #2E2314; --color-error: #EF5350; --color-error-light: #2E1414; --color-info: #29B6F6; --color-info-light: #142530; --color-ai-bubble: #1E3A35; --color-user-bubble: #4c9c8a; --color-input-bg: #242424; --color-overlay: rgba(0, 0, 0, 0.7); /* Dark mode shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(91, 168, 157, 0.5); } /* ===== SYSTEM PREFERENCE DARK MODE ===== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #4c9c8a; --color-primary-light: #7BC4B8; --color-primary-lighter: #9DD5CB; --color-primary-dark: #3a7a6b; --color-background: #121212; --color-surface: #1A1A1A; --color-surface-elevated: #242424; --color-text: #F5F5F5; --color-text-secondary: #B0B0B0; --color-text-muted: #757575; --color-text-inverse: #0e2c25; --color-border: #333333; --color-border-light: #2A2A2A; --color-accent: #4c9c8a; --color-success: #66BB6A; --color-success-light: #1B2E1C; --color-warning: #FFA726; --color-warning-light: #2E2314; --color-error: #EF5350; --color-error-light: #2E1414; --color-info: #29B6F6; --color-info-light: #142530; --color-ai-bubble: #1E3A35; --color-user-bubble: #4c9c8a; --color-input-bg: #242424; --color-overlay: rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(76, 156, 138, 0.5); } } /* ===== ACCESSIBILITY ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== BASE STYLES ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-background); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } /* ===== UTILITY CLASSES ===== */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .bg-primary { background-color: var(--color-primary); } .bg-surface { background-color: var(--color-surface); } .bg-background { background-color: var(--color-background); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); }