/* * Design tokens — dark (default) and light themes. * Apply [data-theme="light"] to to switch. */ :root { color-scheme: dark; /* Backgrounds */ --app-bg: #080c10; --app-topbar-bg: rgba(8, 12, 16, .78); --app-surface: rgba(10, 16, 28, .78); --app-surface-hi: rgba(17, 27, 46, .84); --app-surface-soft: rgba(255, 255, 255, .035); /* Borders */ --app-border: rgba(255, 255, 255, .11); --app-border-soft: rgba(255, 255, 255, .06); /* Accent / brand blue */ --app-accent: #2e7fff; --app-accent-strong: #6eb8ff; --app-accent-dim: rgba(46, 127, 255, .13); --app-accent-bdr: rgba(46, 127, 255, .32); /* Text */ --app-text: #eef2ff; --app-soft: rgba(238, 242, 255, .76); --app-muted: rgba(238, 242, 255, .50); /* Semantic colours */ --app-ok: #22c55e; --app-ok-dim: rgba(34, 197, 94, .10); --app-ok-bdr: rgba(34, 197, 94, .26); --app-err: #f87171; --app-err-dim: rgba(248, 113, 113, .10); --app-err-bdr: rgba(248, 113, 113, .26); --app-warn: #fbbf24; /* Post-login intro animation */ --intro-logo-duration: 1.55s; --overlay-exit-delay: 1.30s; --overlay-exit-duration: .45s; --intro-logo-width: min(72vw, 320px); --app-warn-dim: rgba(251, 191, 36, .10); --app-warn-bdr: rgba(251, 191, 36, .26); --app-slate: #64748b; --app-slate-dim: rgba(100, 116, 139, .13); --app-slate-bdr: rgba(100, 116, 139, .28); --app-purple: #a855f7; --app-purple-dim: rgba(168, 85, 247, .13); --app-purple-bdr: rgba(168, 85, 247, .28); /* Shape */ --app-radius: 16px; --app-radius-sm: 10px; --app-radius-xs: 7px; /* Elevation */ --app-blur: 20px; --app-shadow: 0 8px 40px rgba(4, 8, 20, .50); --app-shadow-soft: 0 8px 28px rgba(4, 8, 20, .30); --app-inset: inset 0 1px 0 rgba(255, 255, 255, .05); /* Decorative grid overlay */ --app-grid-line: rgba(46, 127, 255, .035); /* Shell layout */ --shell-header-h: 60px; --shell-sidebar-w: 220px; --shell-sidebar-w-sm: 52px; /* Canonical breakpoint scale. CSS custom properties can't be read inside an @media feature (e.g. `@media (max-width: var(--bp-md))` isn't valid CSS), so these exist as documentation, not live wiring: any new max-width media query should reuse one of these three values instead of picking an arbitrary number. mail/05i-mail-responsive.css, mail/05h-mail-undo-snackbar.css and 08-launcher.css already match this scale (900/700/480). 06-auth.css (799px), 04-shell.css (768px) and 07-dav.css (640px) predate this convention and use their own close-but-different values -- left as-is rather than changed to 900/ 700/700 respectively, since verifying that's visually safe needs a browser-based diff this environment doesn't have. */ --bp-sm: 480px; --bp-md: 700px; --bp-lg: 900px; /* Brand-constant blues: kept the same in both themes on purpose (CTA gradients/hover states that shouldn't flip with light/dark), unlike the theme-swappable --app-accent* tokens above. */ --brand-blue: #2e7fff; --brand-blue-deep: #1d6be0; --brand-blue-bright: #6eb8ff; --brand-blue-pale: #a8d8ff; --brand-blue-light: #3a8bff; --brand-on-blue: #080c10; } /* Follow the OS preference when the user hasn't made an explicit in-app choice yet (theme.js sets [data-theme] immediately on load and persists it, so this only matters before JS runs or if JS is unavailable). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --app-bg: #eef2ff; --app-topbar-bg: rgba(238, 242, 255, .88); --app-surface: rgba(255, 255, 255, .88); --app-surface-hi: rgba(255, 255, 255, .96); --app-surface-soft: rgba(255, 255, 255, .58); --app-border: rgba(46, 80, 200, .13); --app-border-soft: rgba(46, 80, 200, .07); --app-accent: #1d64e8; --app-accent-strong: #1d6be0; --app-accent-dim: rgba(29, 100, 232, .11); --app-accent-bdr: rgba(29, 100, 232, .24); --app-text: #0d1420; --app-soft: rgba(13, 20, 50, .78); --app-muted: rgba(13, 20, 50, .56); --app-ok: #12813f; --app-ok-dim: rgba(18, 129, 63, .10); --app-ok-bdr: rgba(18, 129, 63, .24); --app-err: #dc2626; --app-err-dim: rgba(220, 38, 38, .10); --app-err-bdr: rgba(220, 38, 38, .22); --app-warn: #b77905; --app-warn-dim: rgba(183, 121, 5, .12); --app-warn-bdr: rgba(183, 121, 5, .24); --app-slate: #64748b; --app-slate-dim: rgba(100, 116, 139, .11); --app-slate-bdr: rgba(100, 116, 139, .24); --app-purple: #7c3aed; --app-purple-dim: rgba(124, 58, 237, .10); --app-purple-bdr: rgba(124, 58, 237, .24); --app-shadow: 0 4px 24px rgba(13, 20, 80, .10); --app-shadow-soft: 0 4px 20px rgba(13, 20, 80, .08); --app-inset: inset 0 1px 0 rgba(255, 255, 255, .65); --app-grid-line: rgba(46, 127, 255, .055); } } :root[data-theme="light"] { color-scheme: light; --app-bg: #eef2ff; --app-topbar-bg: rgba(238, 242, 255, .88); --app-surface: rgba(255, 255, 255, .88); --app-surface-hi: rgba(255, 255, 255, .96); --app-surface-soft: rgba(255, 255, 255, .58); --app-border: rgba(46, 80, 200, .13); --app-border-soft: rgba(46, 80, 200, .07); --app-accent: #1d64e8; --app-accent-strong: #1d6be0; --app-accent-dim: rgba(29, 100, 232, .11); --app-accent-bdr: rgba(29, 100, 232, .24); --app-text: #0d1420; --app-soft: rgba(13, 20, 50, .78); --app-muted: rgba(13, 20, 50, .56); --app-ok: #12813f; --app-ok-dim: rgba(18, 129, 63, .10); --app-ok-bdr: rgba(18, 129, 63, .24); --app-err: #dc2626; --app-err-dim: rgba(220, 38, 38, .10); --app-err-bdr: rgba(220, 38, 38, .22); --app-warn: #b77905; --app-warn-dim: rgba(183, 121, 5, .12); --app-warn-bdr: rgba(183, 121, 5, .24); --app-slate: #64748b; --app-slate-dim: rgba(100, 116, 139, .11); --app-slate-bdr: rgba(100, 116, 139, .24); --app-purple: #7c3aed; --app-purple-dim: rgba(124, 58, 237, .10); --app-purple-bdr: rgba(124, 58, 237, .24); --app-shadow: 0 4px 24px rgba(13, 20, 80, .10); --app-shadow-soft: 0 4px 20px rgba(13, 20, 80, .08); --app-inset: inset 0 1px 0 rgba(255, 255, 255, .65); --app-grid-line: rgba(46, 127, 255, .055); }