/* ========================================================================== DESIGN SYSTEM - CSS CUSTOM PROPERTIES ADHD Screening Portal — variables.css Table of Contents: 1. Color Palette — Light Mode (Default) 2. Color Palette — Dark Mode 3. Glass-morphism Tokens 4. Shadow Scale 5. Border Radius Scale 6. Transition Tokens 7. Typography Scale 8. Spacing Scale 9. Z-index Scale 10. Breakpoints (custom media query vars) 11. Component-specific Tokens ========================================================================== */ /* ========================================================================== 1. COLOR PALETTE — LIGHT MODE (DEFAULT) ========================================================================== */ :root { /* --- Background Colors --- */ --color-bg-body: #F0F9FF; /* Sky-50: main page background */ --color-bg-card: #FFFFFF; /* Pure white: card surfaces */ --color-bg-muted: #E0F2FE; /* Sky-100: subtle muted areas */ --color-bg-subtle: #F8FAFC; /* Slate-50: alternate section bg */ --color-bg-overlay: rgba(15, 23, 42, 0.55); /* Modal backdrop */ /* --- Primary (Sky Blue) --- */ --color-primary: #0EA5E9; /* Sky-500 */ --color-primary-dark: #0284C7; /* Sky-600 */ --color-primary-light: #38BDF8; /* Sky-400 */ --color-primary-xlight: #BAE6FD; /* Sky-200 */ --color-primary-subtle: #E0F2FE; /* Sky-100 */ /* --- Accent (Indigo/Violet) --- */ --color-accent: #6366F1; /* Indigo-500 */ --color-accent-dark: #4F46E5; /* Indigo-600 */ --color-accent-light: #818CF8; /* Indigo-400 */ --color-accent-subtle: #EEF2FF; /* Indigo-50 */ /* --- Semantic Colors --- */ --color-success: #10B981; /* Emerald-500 */ --color-success-dark: #059669; /* Emerald-600 */ --color-success-light: #34D399; /* Emerald-400 */ --color-success-subtle: #ECFDF5; /* Emerald-50 */ --color-warning: #F59E0B; /* Amber-500 */ --color-warning-dark: #D97706; /* Amber-600 */ --color-warning-light: #FCD34D; /* Amber-300 */ --color-warning-subtle: #FFFBEB; /* Amber-50 */ --color-danger: #EF4444; /* Red-500 */ --color-danger-dark: #DC2626; /* Red-600 */ --color-danger-light: #FCA5A5; /* Red-300 */ --color-danger-subtle: #FEF2F2; /* Red-50 */ --color-info: #06B6D4; /* Cyan-500 */ --color-info-subtle: #ECFEFF; /* Cyan-50 */ /* --- Text Colors --- */ --color-text-primary: #0F172A; /* Slate-900 */ --color-text-secondary: #475569; /* Slate-600 */ --color-text-tertiary: #94A3B8; /* Slate-400 */ --color-text-inverse: #FFFFFF; --color-text-on-primary: #FFFFFF; --color-text-link: #0284C7; --color-text-link-hover: #0EA5E9; /* --- Border Colors --- */ --color-border: #E2E8F0; /* Slate-200 */ --color-border-strong: #CBD5E1; /* Slate-300 */ --color-border-focus: #0EA5E9; /* Primary */ --color-border-primary: rgba(14, 165, 233, 0.30); /* --- Severity Palette (ADHD specific) --- */ --color-severity-minimal: #10B981; /* Green */ --color-severity-low: #84CC16; /* Lime-500 */ --color-severity-moderate: #F59E0B; /* Amber */ --color-severity-high: #F97316; /* Orange-500 */ --color-severity-very-high: #EF4444; /* Red */ --color-severity-minimal-bg: #ECFDF5; --color-severity-low-bg: #F7FEE7; --color-severity-moderate-bg: #FFFBEB; --color-severity-high-bg: #FFF7ED; --color-severity-very-high-bg: #FEF2F2; } /* ========================================================================== 2. COLOR PALETTE — DARK MODE ========================================================================== */ [data-theme="dark"] { /* --- Background Colors --- */ --color-bg-body: #0B1120; /* Deep space navy */ --color-bg-card: #1E293B; /* Slate-800 */ --color-bg-muted: #162032; /* Slightly lighter navy */ --color-bg-subtle: #141D2E; /* Alternate bg */ --color-bg-overlay: rgba(0, 0, 0, 0.72); /* --- Primary (Sky Blue — lighter for dark bg) --- */ --color-primary: #38BDF8; /* Sky-400 */ --color-primary-dark: #0EA5E9; /* Sky-500 */ --color-primary-light: #7DD3FC; /* Sky-300 */ --color-primary-xlight: rgba(56, 189, 248, 0.15); --color-primary-subtle: rgba(56, 189, 248, 0.08); /* --- Accent --- */ --color-accent: #818CF8; /* Indigo-400 */ --color-accent-dark: #6366F1; /* Indigo-500 */ --color-accent-light: #A5B4FC; /* Indigo-300 */ --color-accent-subtle: rgba(129, 140, 248, 0.10); /* --- Semantic Colors (adjusted for dark) --- */ --color-success: #34D399; --color-success-dark: #10B981; --color-success-light: #6EE7B7; --color-success-subtle: rgba(52, 211, 153, 0.10); --color-warning: #FCD34D; --color-warning-dark: #F59E0B; --color-warning-light: #FDE68A; --color-warning-subtle: rgba(252, 211, 77, 0.10); --color-danger: #FCA5A5; --color-danger-dark: #EF4444; --color-danger-light: #FECACA; --color-danger-subtle: rgba(252, 165, 165, 0.10); --color-info: #22D3EE; --color-info-subtle: rgba(34, 211, 238, 0.10); /* --- Text Colors --- */ --color-text-primary: #F1F5F9; /* Slate-100 */ --color-text-secondary: #94A3B8; /* Slate-400 */ --color-text-tertiary: #475569; /* Slate-600 */ --color-text-inverse: #0F172A; --color-text-on-primary: #0B1120; --color-text-link: #38BDF8; --color-text-link-hover: #7DD3FC; /* --- Border Colors --- */ --color-border: rgba(148, 163, 184, 0.12); --color-border-strong: rgba(148, 163, 184, 0.24); --color-border-focus: #38BDF8; --color-border-primary: rgba(56, 189, 248, 0.25); /* --- Severity (dark mode adjustments) --- */ --color-severity-minimal: #34D399; --color-severity-low: #A3E635; --color-severity-moderate: #FCD34D; --color-severity-high: #FB923C; --color-severity-very-high: #FCA5A5; --color-severity-minimal-bg: rgba(52, 211, 153, 0.12); --color-severity-low-bg: rgba(163, 230, 53, 0.10); --color-severity-moderate-bg: rgba(252, 211, 77, 0.10); --color-severity-high-bg: rgba(251, 146, 60, 0.10); --color-severity-very-high-bg: rgba(252, 165, 165, 0.10); } /* ========================================================================== 3. GLASS-MORPHISM TOKENS ========================================================================== */ :root { --glass-bg: rgba(255, 255, 255, 0.70); --glass-bg-heavy: rgba(255, 255, 255, 0.88); --glass-bg-light: rgba(255, 255, 255, 0.45); --glass-border: rgba(255, 255, 255, 0.65); --glass-border-subtle: rgba(255, 255, 255, 0.30); --glass-blur: blur(16px); --glass-blur-heavy: blur(24px); --glass-blur-light: blur(8px); --glass-saturate: saturate(180%); } [data-theme="dark"] { --glass-bg: rgba(30, 41, 59, 0.72); --glass-bg-heavy: rgba(30, 41, 59, 0.92); --glass-bg-light: rgba(30, 41, 59, 0.45); --glass-border: rgba(148, 163, 184, 0.14); --glass-border-subtle: rgba(148, 163, 184, 0.07); --glass-blur: blur(20px); --glass-blur-heavy: blur(28px); --glass-blur-light: blur(10px); --glass-saturate: saturate(150%); } /* ========================================================================== 4. SHADOW SCALE ========================================================================== */ :root { --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Glow effects */ --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.35), 0 0 40px rgba(14, 165, 233, 0.15); --shadow-glow-accent: 0 0 20px rgba(99, 102, 241, 0.35), 0 0 40px rgba(99, 102, 241, 0.15); --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.35); --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.35); --shadow-glow-sm: 0 0 10px rgba(14, 165, 233, 0.25); /* Card shadows */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-card-active: 0 2px 4px rgba(0, 0, 0, 0.08); /* Inset shadows */ --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --shadow-inset-md: inset 0 4px 8px rgba(0, 0, 0, 0.08); } [data-theme="dark"] { --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.30), 0 0 40px rgba(56, 189, 248, 0.12); --shadow-glow-accent: 0 0 20px rgba(129, 140, 248, 0.30), 0 0 40px rgba(129, 140, 248, 0.12); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35); } /* ========================================================================== 5. BORDER RADIUS SCALE ========================================================================== */ :root { --radius-none: 0; --radius-xs: 0.25rem; /* 4px */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* pill/circle */ } /* ========================================================================== 6. TRANSITION TOKENS ========================================================================== */ :root { /* Durations */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --duration-slowest: 1000ms; /* Easing functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot spring */ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Composite transitions */ --transition-fast: all var(--duration-fast) var(--ease-out); --transition-normal: all var(--duration-normal) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); --transition-color: color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-spring); } /* ========================================================================== 7. TYPOGRAPHY SCALE ========================================================================== */ :root { /* Font Families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; --font-display: 'Inter', var(--font-sans); /* For hero headings */ /* Font Sizes — fluid where appropriate */ --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 */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --weight-thin: 100; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; } /* ========================================================================== 8. SPACING SCALE ========================================================================== */ :root { --space-px: 1px; --space-0: 0; --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-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* Semantic spacing */ --spacing-page-x: clamp(1rem, 5vw, 2rem); --spacing-section-y: clamp(3rem, 8vw, 6rem); --spacing-card-pad: var(--space-6); --spacing-nav-height: 4rem; /* 64px */ --spacing-footer-h: 3.5rem; /* 56px */ } /* ========================================================================== 9. Z-INDEX SCALE ========================================================================== */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 50; --z-sticky: 80; --z-nav: 100; --z-overlay: 150; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; --z-max: 9999; } /* ========================================================================== 10. LAYOUT TOKENS ========================================================================== */ :root { --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; /* Breakpoints as CSS vars (for JS access via getComputedStyle) */ --bp-sm: '640px'; --bp-md: '768px'; --bp-lg: '1024px'; --bp-xl: '1280px'; --bp-2xl: '1536px'; /* Grid */ --grid-cols-1: repeat(1, minmax(0, 1fr)); --grid-cols-2: repeat(2, minmax(0, 1fr)); --grid-cols-3: repeat(3, minmax(0, 1fr)); --grid-cols-4: repeat(4, minmax(0, 1fr)); } /* ========================================================================== 11. COMPONENT-SPECIFIC TOKENS ========================================================================== */ :root { /* Navigation */ --nav-height: var(--spacing-nav-height); --nav-bg: var(--glass-bg); --nav-border: var(--glass-border); --nav-blur: var(--glass-blur); --nav-link-color: var(--color-text-secondary); --nav-link-hover: var(--color-primary); /* Buttons */ --btn-radius: var(--radius-lg); --btn-font-weight: var(--weight-semibold); --btn-transition: var(--transition-fast); --btn-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.40); /* Cards */ --card-radius: var(--radius-2xl); --card-pad: var(--spacing-card-pad); --card-bg: var(--color-bg-card); --card-border: var(--color-border); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); /* Forms */ --input-height: 2.75rem; /* 44px — touch friendly */ --input-radius: var(--radius-lg); --input-border: var(--color-border-strong); --input-focus-border: var(--color-primary); --input-focus-ring: var(--btn-focus-ring); --input-bg: var(--color-bg-card); /* Progress */ --progress-height: 0.625rem; /* 10px */ --progress-radius: var(--radius-full); --progress-bg: var(--color-bg-muted); --progress-fill: var(--color-primary); /* Score circle */ --score-circle-size: 11rem; /* 176px */ --score-circle-stroke: 10; /* Overlay / Modal */ --modal-radius: var(--radius-2xl); --modal-shadow: var(--shadow-2xl); --modal-max-w: 32rem; /* Toast */ --toast-width: 22rem; --toast-radius: var(--radius-xl); --toast-shadow: var(--shadow-xl); /* Gradient helpers */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); --gradient-primary-h: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent-dark) 100%); --gradient-sky: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%); --gradient-hero: linear-gradient(135deg, #E0F2FE 0%, #EEF2FF 50%, #F0F9FF 100%); --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,249,255,0.7) 100%); --gradient-text: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); } [data-theme="dark"] { --nav-bg: rgba(11, 17, 32, 0.80); --nav-border: rgba(56, 189, 248, 0.12); --card-bg: var(--color-bg-card); --card-border: var(--color-border); --input-bg: var(--color-bg-muted); --progress-bg: rgba(56, 189, 248, 0.12); --gradient-hero: linear-gradient(135deg, #0B1120 0%, #101827 50%, #0F172A 100%); --gradient-card: linear-gradient(145deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.7) 100%); --btn-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.35); --input-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.30); }