/* CataBull v2 — navy/purple design system from Figma */ :root, [data-theme="dark"] { /* Surface stack — deepest to highest */ --crust: #040E1F; /* deepest sunken (search input bg) */ --base: #081425; /* page background */ --mantle: #111C2D; /* solid panels (table footer, popovers) */ --surface0: #152031; /* default card surface */ --surface1: #1F2A3C; /* chip / company logo backdrop */ --surface2: #2A3548; /* inactive pill bg */ --overlay: #3A4558; --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.05); --border-strong:rgba(255, 255, 255, 0.12); /* Text */ --text: #D8E3FB; --subtext: #CCC3D8; --subtext0: #6B7280; /* Brand accents */ --primary: #7C3AED; /* royal purple */ --primary-soft: #D2BBFF; /* soft lavender (text on dark, fill) */ --primary-bright: #EDE0FF; /* near-white lavender (text on primary) */ --primary-deep: #3F008E; /* deep purple (text on primary-soft button) */ --indigo: #5254DF; /* secondary CTA */ --indigo-soft: #C0C1FF; --indigo-bright: #E5E3FF; /* Semantic — keep Catppuccin-style names so existing components still resolve */ --blue: #5254DF; --mauve: #7C3AED; --green: #3FD3A1; --yellow: #F5C95B; --sky: #4FC8E6; --peach: #FB923C; /* orange — interview dot */ --red: #F77272; --pink: #F0A9CD; --teal: #4FC8E6; --lavender: #C0C1FF; --flamingo: #F2CDCD; --rosewater: #F5E0DC; /* Aliases used across components */ --bg: var(--base); --bg-secondary: var(--surface0); --bg-hover: var(--surface1); --score-excellent: var(--green); --score-good: var(--sky); --score-decent: var(--yellow); --score-low: var(--peach); --score-poor: var(--red); --radius-xs: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; --transition: 160ms cubic-bezier(.4, 0, .2, 1); --font-display: 'Hanken Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Geist', 'Inter', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace; --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25); --shadow-rail: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-primary: 0 10px 15px -3px rgba(124, 58, 237, 0.30), 0 4px 6px -4px rgba(124, 58, 237, 0.30); --shadow-soft: 0 10px 15px -3px rgba(210, 187, 255, 0.20), 0 4px 6px -4px rgba(210, 187, 255, 0.20); /* Glass surfaces — semi-transparent layers that pick up the page glow. These flip in [data-theme="light"] so cards stay readable in both modes. */ --glass-nav: rgba(8, 20, 37, 0.65); --glass-rail: rgba(21, 32, 49, 0.35); --glass-card: rgba(21, 32, 49, 0.6); --glass-table-th: rgba(42, 53, 72, 0.30); --glass-input: rgba(8, 20, 37, 0.55); } /* Light mode — softened version of the same palette */ [data-theme="light"] { --crust: #ECECF4; --base: #F5F5FA; --mantle: #FFFFFF; --surface0: #FFFFFF; --surface1: #F1EEF7; --surface2: #E5DEF2; --overlay: #D7CCEA; --border: rgba(15, 23, 42, 0.10); --border-soft: rgba(15, 23, 42, 0.06); --border-strong:rgba(15, 23, 42, 0.14); --text: #14132B; --subtext: #4B4760; --subtext0: #8A86A0; --primary-bright: #FFFFFF; --primary-deep: #FFFFFF; --primary-soft: #6428D2; --green: #2EB17F; --yellow: #C99419; --sky: #178FB6; --peach: #DC6A1B; --red: #D14444; --blue: #4244B5; --mauve: #6428D2; --lavender: #6B6CD4; --indigo: #4244B5; --indigo-soft: #4244B5; --indigo-bright: #FFFFFF; --glass-nav: rgba(255, 255, 255, 0.78); --glass-rail: rgba(255, 255, 255, 0.55); --glass-card: rgba(255, 255, 255, 0.85); --glass-table-th: rgba(20, 19, 43, 0.04); --glass-input: #FFFFFF; } * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; } [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } body { font-family: var(--font-body); background: var(--base); color: var(--text); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01', 'ss03'; } /* Subtle painterly aurora behind the app — gives the deep navy that purple glow you see in the Figma corners without dropping in real images. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60vw 50vh at 12% -8%, rgba(124, 58, 237, 0.18), transparent 60%), radial-gradient(50vw 40vh at 88% -4%, rgba(82, 84, 223, 0.14), transparent 65%), radial-gradient(40vw 30vh at 100% 100%, rgba(124, 58, 237, 0.10), transparent 70%); } [data-theme="light"] body::before { background: radial-gradient(60vw 50vh at 12% -8%, rgba(124, 58, 237, 0.10), transparent 60%), radial-gradient(50vw 40vh at 88% -4%, rgba(82, 84, 223, 0.06), transparent 65%); } #app { position: relative; z-index: 1; } a { color: var(--lavender); text-decoration: none; } a:hover { color: var(--primary-soft); text-decoration: underline; } ::selection { background: rgba(124, 58, 237, 0.45); color: var(--primary-bright); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); background-clip: padding-box; border: 2px solid transparent; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.12); background-clip: padding-box; border: 2px solid transparent; } /* Theme toggle — refined icon-only chip */ .theme-toggle { background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--subtext); cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; transition: color var(--transition), background var(--transition), border-color var(--transition); } .theme-toggle:hover { color: var(--text); background: var(--surface1); border-color: var(--border-soft); }