/* ============================================================================ NIMBUS DESIGN TOKENS - canonical source of truth ---------------------------------------------------------------------------- This file is the ONE place colors, type, radii, shadows and motion are defined. It is copied verbatim to: website/css/tokens.css app/renderer/css/tokens.css Run `npm run sync:tokens` from /server (or `node scripts/sync-tokens.js`) after editing. Never edit the copies. SYSTEM RULES (see AGENTS.md section "Design contract"): - ONE accent: --brand. No second accent color anywhere. - Radius rule: buttons + chips = pill, cards = --r-lg, inputs = --r-md. - Shadows are tinted with the sky hue. No pure-black shadows. - No pure #000 / #fff as surfaces. ========================================================================== */ :root { color-scheme: light dark; /* --- Brand: one cobalt accent, used identically on site and in app ------ */ --brand-50: #eef4ff; --brand-100: #dbe7ff; --brand-200: #bed3ff; --brand-300: #91b5ff; --brand-400: #5f8dff; --brand: #2f68f0; /* primary */ --brand-600: #2358d8; --brand-700: #1b44ad; --brand-800: #17387f; --brand-900: #112a5e; /* --- Sky: used for the hero atmosphere + app ambient wash -------------- */ --sky-top: #3f7fe0; --sky-mid: #6aa6ef; --sky-low: #a9cdf7; --sky-haze: #e4f0fd; /* --- Semantic (status only, never decorative) ------------------------- */ --ok: #1f9d6b; --warn: #c4841a; --err: #d04545; --info: var(--brand); /* --- Neutrals: cool-tinted to match the cool accent. One family only. -- */ --canvas: #f2f6fd; --surface: #ffffff; --surface-2: #eaf1fb; --surface-3: #dfe9f8; --hairline: #d8e3f4; --hairline-soft:#e6eefa; --ink: #0c1830; --body: #41536f; --muted: #64769a; --on-brand: #ffffff; /* --- Glass (the signature material, light mode) ----------------------- */ --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-2: rgba(255, 255, 255, 0.78); --glass-stroke: rgba(255, 255, 255, 0.70); --glass-inner: rgba(255, 255, 255, 0.90); --glass-blur: 22px; /* --- Type ------------------------------------------------------------- */ --font-sans: "Geist", "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --t-display-xl: 700 clamp(2.5rem, 5vw, 4.25rem)/1.05 var(--font-sans); --t-display-lg: 700 clamp(2.3rem, 4.2vw, 3.5rem)/1.07 var(--font-sans); --t-display-md: 650 clamp(1.7rem, 2.6vw, 2.35rem)/1.14 var(--font-sans); --t-title-lg: 600 1.25rem/1.3 var(--font-sans); --t-title-md: 600 1.0625rem/1.35 var(--font-sans); --t-title-sm: 600 0.9375rem/1.4 var(--font-sans); --t-body: 400 1rem/1.6 var(--font-sans); --t-body-sm: 400 0.875rem/1.55 var(--font-sans); --t-label: 550 0.8125rem/1.3 var(--font-sans); --t-caption: 450 0.75rem/1.4 var(--font-sans); --tracking-display: -0.025em; --tracking-tight: -0.012em; /* --- Radius: the locked scale ----------------------------------------- */ --r-xs: 6px; --r-sm: 9px; --r-md: 12px; /* inputs, small tiles */ --r-lg: 18px; /* cards, panels */ --r-xl: 26px; /* hero glass surfaces */ --r-pill: 999px; /* every button and chip */ /* --- Elevation: sky-tinted, never black ------------------------------- */ --e-1: 0 1px 2px rgba(17, 42, 94, 0.05), 0 1px 1px rgba(17, 42, 94, 0.04); --e-2: 0 2px 6px rgba(17, 42, 94, 0.06), 0 8px 18px -10px rgba(17, 42, 94, 0.14); --e-3: 0 4px 12px rgba(17, 42, 94, 0.07), 0 22px 44px -22px rgba(17, 42, 94, 0.26); --e-4: 0 8px 24px rgba(17, 42, 94, 0.09), 0 48px 90px -40px rgba(17, 42, 94, 0.38); --ring: 0 0 0 3px rgba(47, 104, 240, 0.30); /* --- Spacing + layout -------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px; --page-max: 1240px; --gutter: clamp(20px, 4vw, 48px); /* --- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 140ms; --d-base: 260ms; --d-slow: 620ms; /* --- Layering: the documented z scale. Never invent values. ------------ */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* --------------------------------------------------------------------------- DARK MODE - page-level lock. The site and the app each flip as a whole; individual sections never invert. Brand is LIFTED rather than desaturated so the accent keeps AA contrast on dark surfaces and stays recognisably Nimbus. Three states are handled: no attribute = follow the OS, [data-theme="dark"] = explicit dark, [data-theme="light"] = explicit light wins over the OS. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-50: #121d35; --brand-100: #17284a; --brand-200: #1f3a6b; --brand-300: #2b5296; --brand-400: #4a79d8; --brand: #6a97ff; --brand-600: #8ab0ff; --brand-700: #a8c5ff; --sky-top: #0f2347; --sky-mid: #17355f; --sky-low: #1e4575; --sky-haze: #122744; --ok: #3cc08a; --warn: #e0a63c; --err: #f07070; --canvas: #070c18; --surface: #0f1727; --surface-2: #162034; --surface-3: #1e2b43; --hairline: #243348; --hairline-soft:#1a2639; --ink: #eaf1fc; --body: #a9bbd6; --muted: #7e91b0; --on-brand: #07142e; --glass-bg: rgba(20, 31, 51, 0.60); --glass-bg-2: rgba(24, 37, 60, 0.82); --glass-stroke: rgba(150, 180, 230, 0.16); --glass-inner: rgba(190, 215, 255, 0.10); --e-1: 0 1px 2px rgba(0, 0, 0, 0.40); --e-2: 0 2px 6px rgba(0, 0, 0, 0.42), 0 8px 18px -10px rgba(0, 0, 0, 0.55); --e-3: 0 4px 12px rgba(0, 0, 0, 0.45), 0 22px 44px -22px rgba(0, 0, 0, 0.70); --e-4: 0 8px 24px rgba(0, 0, 0, 0.50), 0 48px 90px -40px rgba(0, 0, 0, 0.80); --ring: 0 0 0 3px rgba(106, 151, 255, 0.38); } } :root[data-theme="dark"] { --brand-50: #121d35; --brand-100: #17284a; --brand-200: #1f3a6b; --brand-300: #2b5296; --brand-400: #4a79d8; --brand: #6a97ff; --brand-600: #8ab0ff; --brand-700: #a8c5ff; --sky-top: #0f2347; --sky-mid: #17355f; --sky-low: #1e4575; --sky-haze: #122744; --ok: #3cc08a; --warn: #e0a63c; --err: #f07070; --canvas: #070c18; --surface: #0f1727; --surface-2: #162034; --surface-3: #1e2b43; --hairline: #243348; --hairline-soft:#1a2639; --ink: #eaf1fc; --body: #a9bbd6; --muted: #7e91b0; --on-brand: #07142e; --glass-bg: rgba(20, 31, 51, 0.60); --glass-bg-2: rgba(24, 37, 60, 0.82); --glass-stroke: rgba(150, 180, 230, 0.16); --glass-inner: rgba(190, 215, 255, 0.10); --e-1: 0 1px 2px rgba(0, 0, 0, 0.40); --e-2: 0 2px 6px rgba(0, 0, 0, 0.42), 0 8px 18px -10px rgba(0, 0, 0, 0.55); --e-3: 0 4px 12px rgba(0, 0, 0, 0.45), 0 22px 44px -22px rgba(0, 0, 0, 0.70); --e-4: 0 8px 24px rgba(0, 0, 0, 0.50), 0 48px 90px -40px rgba(0, 0, 0, 0.80); --ring: 0 0 0 3px rgba(106, 151, 255, 0.38); } /* Reduced transparency: glass collapses to a solid tinted fill. */ @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: var(--surface); --glass-bg-2: var(--surface); --glass-blur: 0px; } } /* Reduced motion: every duration collapses. Components also guard individually, this is the global safety net. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }