/* ============================================================ NOVA — Design Tokens (monochrome, Notion/Apple-clean) Neutral Radix-gray ramp · Inter · hairline borders · small radii. Theme via [data-theme="light"|"dark"] on . Accent = near-black ink (light) / near-white (dark), overridable per-instance via --brand-accent (white-label). Legacy gold/ink tokens are ALIASED to neutrals at the bottom so the 14 existing views keep rendering while migrating. ============================================================ */ :root { /* ---- Typography ---- */ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace; --fs-display: clamp(1.7rem, 2.4vw, 2.05rem); --fs-h1: 1.4rem; --fs-h2: 1.15rem; --fs-h3: 1.0rem; --fs-body: 0.9375rem; --fs-sm: 0.8438rem; --fs-xs: 0.78rem; --fs-2xs: 0.6875rem; /* ---- Spacing scale ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-12: 80px; /* ---- Radii (soft, Notion/ClickUp/Apple) ---- */ --r-xs: 7px; --r-sm: 9px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px; /* ---- Layout dimensions ---- */ --rail-w: 248px; --rail-w-collapsed: 64px; --topbar-h: 54px; --aidock-w: 380px; /* ---- Motion (house curves — never the browser default `ease`) ---- */ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* default for almost everything */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* alias (decorative entrances) */ --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1); /* badges, pops, overshoot */ --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1); /* symmetric moves */ --t-fast: 150ms; --t-med: 200ms; --t-slow: 280ms; /* ---- z-index ---- */ --z-rail: 40; --z-topbar: 30; --z-dock: 50; --z-modal: 100; --z-palette: 120; --z-toast: 130; } /* ============================================================ LIGHT THEME (default surface) ============================================================ */ :root, [data-theme="light"] { color-scheme: light; /* Backgrounds & surfaces */ --bg: #ffffff; --surface-0: #ffffff; --surface-1: #fafafa; --surface-2: #f4f4f5; --surface-3: #ececee; --surface-glass: rgba(255, 255, 255, 0.82); --raised: #ffffff; /* Text */ --text-100: #171717; /* primary heading/body strong */ --text-200: #2a2a2a; /* body */ --text-300: #52525b; /* secondary */ --text-400: #71717a; /* tertiary / muted */ --text-500: #a1a1aa; /* faint / disabled / placeholder */ /* Borders */ --border-soft: #f0f0f1; --border: #ececec; --border-strong: #dcdcdc; /* Accent: near-black ink (overridable) */ --accent: var(--brand-accent, #18181b); --accent-hover: var(--brand-accent, #000000); --accent-fg: #ffffff; /* text on accent fills */ --accent-soft: rgba(24, 24, 27, 0.06); --accent-ring: rgba(24, 24, 27, 0.14); /* Semantic status — desaturated, sparse */ --green-400: #3f9b6e; --green-bg: rgba(63, 155, 110, 0.10); --red-400: #c2554d; --red-bg: rgba(194, 85, 77, 0.10); --amber-400: #b07d2a; --amber-bg: rgba(176, 125, 42, 0.11); --blue-400: #4f6fa3; --blue-bg: rgba(79, 111, 163, 0.10); --violet-400:#6f5fa3; --violet-bg:rgba(111, 95, 163, 0.10); --teal-400: #3f8d86; --teal-bg: rgba(63, 141, 134, 0.10); --pink-400: #a65a82; --pink-bg: rgba(166, 90, 130, 0.10); /* Pipeline / category accents (neutralized — used as small dots) */ --c-venture: #4f6fa3; --c-investor: #3f9b6e; --c-operator: #6f5fa3; --c-chrg: #b07d2a; /* Shadows — restrained */ --shadow-sm: 0 1px 1px rgba(0,0,0,0.04); --shadow-md: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04); --shadow-lg: 0 4px 14px -4px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05); --shadow-xl: 0 12px 36px -10px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08); --shadow-inset: none; /* Layered depth: hairline ring (not a border) + tight contact + wide ambient, all faint. */ --shadow-card: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02), 0 0 0 0.5px rgba(0,0,0,0.08); --shadow-elevated: 0 4px 8px rgba(0,0,0,0.02), 0 8px 12px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.10); } /* ============================================================ DARK THEME ============================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: #171717; --surface-0: #171717; --surface-1: #1e1e1e; --surface-2: #262626; --surface-3: #2f2f2f; --surface-glass: rgba(23, 23, 23, 0.82); --raised: #1e1e1e; --text-100: #ebebeb; --text-200: #d4d4d4; --text-300: #a1a1a1; --text-400: #8a8a8a; --text-500: #6b6b6b; --border-soft: #232323; --border: #2a2a2a; --border-strong: #3a3a3a; --accent: var(--brand-accent, #fafafa); --accent-hover: var(--brand-accent, #ffffff); --accent-fg: #171717; --accent-soft: rgba(255, 255, 255, 0.08); --accent-ring: rgba(255, 255, 255, 0.16); --green-400: #5cba8a; --green-bg: rgba(92, 186, 138, 0.12); --red-400: #d97a72; --red-bg: rgba(217, 122, 114, 0.12); --amber-400: #d4a04a; --amber-bg: rgba(212, 160, 74, 0.12); --blue-400: #7d9bce; --blue-bg: rgba(125, 155, 206, 0.12); --violet-400:#9b8bd0; --violet-bg:rgba(155, 139, 208, 0.12); --teal-400: #5fb3aa; --teal-bg: rgba(95, 179, 170, 0.12); --pink-400: #cc88aa; --pink-bg: rgba(204, 136, 170, 0.12); --c-venture: #7d9bce; --c-investor: #5cba8a; --c-operator: #9b8bd0; --c-chrg: #d4a04a; --shadow-sm: 0 1px 1px rgba(0,0,0,0.3); --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 6px 20px -6px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); --shadow-xl: 0 16px 44px -12px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.45); --shadow-inset: none; /* Dark: the hairline ring is light, not dark. */ --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(255,255,255,0.06); --shadow-elevated: 0 8px 24px -6px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.09); } /* ============================================================ LEGACY ALIASES — keep the 14 existing views rendering. Every old gold/ink/glow token maps to a neutral so nothing breaks mid-migration. Cleaned per-surface later. ============================================================ */ :root, [data-theme] { /* ink ramp -> neutral surfaces/borders */ --ink-900: var(--bg); --ink-850: var(--bg); --ink-800: var(--bg); --ink-750: var(--surface-1); --ink-700: var(--surface-1); --ink-650: var(--surface-2); --ink-600: var(--surface-2); --ink-550: var(--border-strong); --ink-500: var(--border); --ink-450: var(--text-500); /* gold ramp -> accent ink */ --gold-50: var(--accent-soft); --gold-100: var(--accent); --gold-200: var(--accent); --gold-300: var(--accent); --gold-400: var(--accent); --gold-500: var(--accent); --gold-600: var(--accent); --gold-700: var(--accent); --gold-glow: var(--accent-soft); --text-gold: var(--text-100); /* border aliases that referenced gold */ --border-gold: var(--border-strong); /* surface alpha tokens used directly by some views */ /* (already defined above as solid neutrals) */ /* shadows that referenced gold -> neutral */ --shadow-gold: var(--shadow-md); }