/* * EnglishAI — design tokens (P1 design system). * * Single source of truth for colors, radii, shadows, motion. Every page * consumes these via var(); nothing hard-codes hex outside this file. * * data-theme="light|dark" lives on , set synchronously by theme.js * before first paint so there's no flash. Default = OS preference. * * Palette leans Mac-style: near-white / near-black backgrounds, tinted * surface for cards, hairline 1px borders, soft shadows. */ :root, :root[data-theme="light"] { /* Brand ------------------------------------------------------------- */ --brand: rgb(0, 175, 202); /* legacy --cyan */ --brand-2: #0015b3; /* legacy --navy */ --brand-accent: rgb(254, 197, 12); /* legacy --yellow */ --brand-tint: rgba(0, 175, 202, .10); --brand-hover: rgb(0, 158, 183); /* Tech gradient — indigo → royal blue → electric cyan. Bright enough to feel modern, light enough to avoid the "corporate navy" heaviness. */ --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #3b82f6 45%, #06b6d4 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, .10) 0%, rgba(6, 182, 212, .10) 100%); /* Surfaces --------------------------------------------------------- */ --bg: #fbfbfd; /* page background */ --bg-2: #f5f5f7; /* subtle group backdrop */ --surface: #ffffff; /* cards, dropdowns */ --surface-2: #f5f5f7; /* nested cards, chips */ --surface-active: rgba(0, 0, 0, .06); /* pressed nav item */ --surface-hover: rgba(0, 0, 0, .04); --glass: color-mix(in srgb, #ffffff 76%, transparent); --glass-strong: color-mix(in srgb, #ffffff 88%, transparent); /* Text ------------------------------------------------------------- */ --text: #1d1d1f; /* primary */ --text-2: #6e6e73; /* secondary */ --text-3: #a1a1a6; /* tertiary, hints */ --text-inv: #ffffff; /* on brand fills */ /* Borders ---------------------------------------------------------- */ --border: rgba(0, 0, 0, .08); /* hairlines */ --border-strong: rgba(0, 0, 0, .14); --focus-ring: color-mix(in srgb, var(--brand) 45%, transparent); /* Status ----------------------------------------------------------- */ --success: #16a34a; --success-bg: #dcfce7; --warn: #d97706; --warn-bg: #fef3c7; --danger: #dc2626; --danger-bg: #fee2e2; --info: var(--brand); --info-bg: var(--brand-tint); /* Shadows — soft, layered ------------------------------------------ */ --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05); --shadow-2: 0 4px 12px -4px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04); --shadow-3: 0 12px 32px -12px rgba(15, 23, 42, .18), 0 4px 12px -4px rgba(15, 23, 42, .08); --shadow-focus: 0 0 0 3px var(--focus-ring); /* Geometry --------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-round: 999px; /* Motion ----------------------------------------------------------- */ --ease: cubic-bezier(.2, .9, .3, 1); /* Apple-ish ease-out */ --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; /* Layers ----------------------------------------------------------- */ --z-nav: 100; --z-drawer: 150; --z-modal: 200; --z-toast: 300; /* Effects ---------------------------------------------------------- */ --blur: blur(20px) saturate(160%); } :root[data-theme="dark"] { /* Evervault-inspired dark theme (2026-07-20). - Deep near-black-purple base (#010314) for the page shell. - Bright violet (#592DD1) as the primary brand accent. - Purple gradients — deep indigo → violet → light violet. - Whites and lavender-tinted greys for text. Notes on ergonomics: shadows carry a violet tint so cards feel like they glow from within, not just drop shadow onto black. Borders keep a subtle violet cast so hairlines stay visible on the deep bg. */ --brand: #592DD1; /* signature violet */ --brand-2: #3c1c9c; /* deeper violet */ --brand-accent: rgb(254, 197, 12); /* golden accent kept — pops on violet */ --brand-tint: rgba(89, 45, 209, .18); --brand-hover: #6b3ff0; /* slightly brighter on hover */ /* Deep → primary → light violet. Feels like the Evervault hero wash. */ --brand-gradient: linear-gradient(135deg, #1a0d3d 0%, #592DD1 55%, #8b5cf6 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(89, 45, 209, .22) 0%, rgba(139, 92, 246, .12) 100%); --bg: #010314; /* deep purple-navy, near-black */ --bg-2: #070a24; /* one step lighter for group backdrops */ --surface: #0d1030; /* raised cards */ --surface-2: #171a3d; /* nested cards / chips */ --surface-active: rgba(139, 92, 246, .16); /* pressed nav item — violet wash */ --surface-hover: rgba(139, 92, 246, .10); --glass: color-mix(in srgb, #0d1030 76%, transparent); --glass-strong: color-mix(in srgb, #0d1030 88%, transparent); --text: #ffffff; --text-2: #a8a4c9; /* lavender-tinted secondary — 8.7:1 on --bg */ /* Tertiary text — bumped from #6d6797 (3.15:1 on --surface-2, failed WCAG AA) to #9590be so muted labels stay readable on every dark surface. Contrast: 6.7:1 on --bg, 5.9:1 on --surface, 5.2:1 on --surface-2 — clears 4.5:1 AA everywhere and keeps the lavender wash of the Evervault palette. */ --text-3: #9590be; /* muted lavender */ --text-inv: #010314; --border: rgba(148, 130, 255, .14); /* violet-tinted hairlines */ --border-strong: rgba(148, 130, 255, .26); --focus-ring: color-mix(in srgb, var(--brand) 55%, transparent); --success: #22c55e; --success-bg: rgba(34, 197, 94, .16); --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, .16); --danger: #f87171; --danger-bg: rgba(248, 113, 113, .16); --info: var(--brand); --info-bg: var(--brand-tint); /* Shadows blend deep black with a soft violet halo so raised surfaces look emissive on the near-black shell rather than muddy. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(89, 45, 209, .05); --shadow-2: 0 4px 14px -4px rgba(0, 0, 0, .65), 0 2px 8px rgba(89, 45, 209, .18); --shadow-3: 0 14px 36px -14px rgba(0, 0, 0, .75), 0 6px 18px -4px rgba(89, 45, 209, .28); /* Override legacy aliases here (specificity 0,2,0) so that a page's inline `:root { --cyan: rgb(0,175,202); --bg: #f0fbfd; ... }` block (specificity 0,1,0, declared after tokens.css) does NOT win. Without this, most existing pages keep the light cyan palette in dark mode. */ --cyan: var(--brand); --navy: var(--brand-2); --yellow: var(--brand-accent); --s50: var(--bg-2); --s100: var(--surface-2); --s200: var(--border); --s300: var(--border-strong); --s500: var(--text-2); --s700: var(--text); --s900: var(--text); --card: var(--surface); --card-bg: var(--surface); --red: var(--danger); --green: var(--success); --blue: var(--brand); --orange: var(--warn); --sub: var(--text-2); } /* Legacy aliases — kept while pages migrate. Points at token values so old hard-coded `var(--cyan)` etc. still work on both themes. Delete when every consumer references the modern tokens. */ :root { --cyan: var(--brand); --navy: var(--brand-2); --yellow: var(--brand-accent); --s50: var(--bg-2); --s100: var(--surface-2); --s200: var(--border); --s300: var(--border-strong); --s500: var(--text-2); --s700: var(--text); --s900: var(--text); --red: var(--danger); } /* Global reset for smooth theme swaps — nothing else in this file. */ html { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { background: var(--bg); color: var(--text); transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } /* Reduced motion — respect OS setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ── Dark-theme compat layer ────────────────────────────────────────── Old page HTML uses hard-coded #f8fafc / #fff / #64748b etc. in inline