/* ============================================================ Brain Alarm — Material 3 design tokens (web) Mirrors the shipped app's runtime theme: colours generated from the launcher-icon brand seed #6192C3 via the M3 "Tonal Spot" algorithm, the app's custom Type.kt scale, AppShapes, Spacing.kt and elevation. Components reference role tokens (--primary, --surface, …), never raw hex. ============================================================ */ :root { /* ---- Type family (Roboto Flex loaded in ; system fallback) ---- */ --font-sans: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: var(--font-sans); /* ---- Brand palette (launcher-icon artwork tones) ---- */ --brand-brain-back: #97BCDF; --brand-brain-front: #6192C3; --brand-hands: #30517A; --brand-plate: #E5EFF8; /* ---- Primary ---- */ --primary: #32628D; --on-primary: #FFFFFF; --primary-container: #D0E4FF; --on-primary-container: #001D34; /* ---- Secondary ---- */ --secondary: #526070; --on-secondary: #FFFFFF; --secondary-container: #D6E4F7; --on-secondary-container: #0F1D2A; /* ---- Tertiary ---- */ --tertiary: #695779; --on-tertiary: #FFFFFF; --tertiary-container: #F0DBFF; --on-tertiary-container: #241532; /* ---- Error ---- */ --error: #BA1A1A; --on-error: #FFFFFF; --error-container: #FFDAD6; --on-error-container: #410002; /* ---- Surfaces ---- */ --surface: #F8F9FF; --on-surface: #191C20; --on-surface-variant: #42474E; --surface-container-lowest: #FFFFFF; --surface-container-low: #F2F3F9; --surface-container: #ECEEF4; --surface-container-high: #E6E8EE; --surface-container-highest: #E0E2E8; --surface-dim: #D8DAE0; --surface-bright: #F8F9FF; /* ---- Outline / inverse / scrim ---- */ --outline: #73777F; --outline-variant: #C2C7CF; --inverse-surface: #2D3135; --inverse-on-surface: #EFF1F6; --inverse-primary: #9DCBFC; --scrim: #000000; /* ---- Semantic accents ---- */ --success-hit: #4CAF50; --success-matched: #2E7D32; --pb-gold-bg: #FFF1D0; --pb-gold-fg: #B8771A; /* ---- Shape scale (AppShapes — rounder than stock M3) ---- */ --shape-none: 0px; --shape-extra-small: 8px; --shape-small: 12px; --shape-medium: 16px; --shape-large: 24px; --shape-extra-large: 32px; --shape-full: 9999px; /* ---- Spacing (4dp grid, Spacing.kt) ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px; /* ---- Elevation (M3 shadow, light) ---- */ --elevation-0: none; --elevation-1: 0px 1px 2px rgba(0,0,0,.30), 0px 1px 3px 1px rgba(0,0,0,.15); --elevation-2: 0px 1px 2px rgba(0,0,0,.30), 0px 2px 6px 2px rgba(0,0,0,.15); --elevation-3: 0px 1px 3px rgba(0,0,0,.30), 0px 4px 8px 3px rgba(0,0,0,.15); --elevation-4: 0px 2px 3px rgba(0,0,0,.30), 0px 6px 10px 4px rgba(0,0,0,.15); --elevation-5: 0px 4px 4px rgba(0,0,0,.30), 0px 8px 12px 6px rgba(0,0,0,.15); /* ---- Motion ---- */ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --duration-medium: 300ms; --duration-short: 150ms; } /* Dark theme (used only if a consumer opts in with data-theme="dark"; the marketing site itself renders light). */ :root[data-theme="dark"], .dark { --primary: #9DCBFC; --on-primary: #013355; --primary-container: #134A74; --on-primary-container: #D0E4FF; --secondary: #BAC8DA; --on-secondary: #243240; --secondary-container: #3A4857; --on-secondary-container: #D6E4F7; --error: #FFB4AB; --on-error: #690005; --error-container: #93010A; --on-error-container: #FFDAD6; --surface: #101418; --on-surface: #E0E2E8; --on-surface-variant: #C2C7CF; --surface-container-lowest: #0B0E12; --surface-container-low: #191C20; --surface-container: #1D2024; --surface-container-high: #272A2F; --surface-container-highest: #32353A; --outline: #8C9199; --outline-variant: #42474E; --elevation-1: none; --elevation-2: 0px 1px 3px rgba(0,0,0,.40); --elevation-3: 0px 4px 10px rgba(0,0,0,.45); --elevation-4: 0px 6px 14px rgba(0,0,0,.50); --elevation-5: 0px 8px 20px rgba(0,0,0,.55); }