/* Hyroo — design tokens Ramp/Mercury-leaning: cool neutrals, single restrained signal, mono for data. Both light + dark; theme via [data-theme] on . */ :root, [data-theme="light"] { --bg: #FAFAF7; --surface: #FFFFFF; --surface-2: #F4F4F0; --surface-3: #EDEDE7; --raised: #FFFFFF; --text: #18181B; --text-soft: #3F3F46; --muted: #71717A; --muted-2: #A1A1AA; --placeholder: #B4B4BB; --border: #E4E4E0; --border-2: #D4D4CE; --border-strong:#1F1F22; --signal: #2A4BFB; /* primary action / focus — Mercury-ish blue */ --signal-bg: #EEF1FF; --signal-soft: #DCE2FF; --ai: #6E3BD3; /* AI features — purple, used sparingly */ --ai-bg: #F3EDFF; --ai-soft: #E4D4FF; --success: #137A3D; --success-bg: #E7F4EC; --warn: #A36015; --warn-bg: #FBF1DF; --danger: #B4262A; --danger-bg: #FBE9EA; /* stage colors — used for pipeline chips, kept muted */ --stage-new: #5F6B7A; --stage-screen: #2A4BFB; --stage-iview: #6E3BD3; --stage-offer: #137A3D; --stage-hired: #137A3D; --stage-arch: #71717A; --shadow-sm: 0 1px 2px rgba(15, 15, 20, .04), 0 0 0 .5px rgba(15, 15, 20, .04); --shadow-md: 0 2px 4px rgba(15, 15, 20, .04), 0 8px 24px rgba(15, 15, 20, .06), 0 0 0 .5px rgba(15, 15, 20, .06); --shadow-lg: 0 4px 8px rgba(15, 15, 20, .06), 0 24px 64px rgba(15, 15, 20, .10), 0 0 0 .5px rgba(15, 15, 20, .06); --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; } [data-theme="dark"] { --bg: #0B0B0D; --surface: #131316; --surface-2: #18181C; --surface-3: #1F1F24; --raised: #16161A; --text: #ECECEE; --text-soft: #C7C7CB; --muted: #8A8A93; --muted-2: #5F5F68; --placeholder: #4B4B53; --border: #25252B; --border-2: #34343A; --border-strong:#52525B; --signal: #6B8AFF; --signal-bg: #15203D; --signal-soft: #1E2D55; --ai: #A78BFA; --ai-bg: #261C44; --ai-soft: #36285F; --success: #4FBB7B; --success-bg: #122B1D; --warn: #D8932F; --warn-bg: #36240F; --danger: #E5605F; --danger-bg: #361617; --stage-new: #8A8A93; --stage-screen: #6B8AFF; --stage-iview: #A78BFA; --stage-offer: #4FBB7B; --stage-hired: #4FBB7B; --stage-arch: #5F5F68; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .04); --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .05); --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 64px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text); background: var(--bg); font-size: 13px; line-height: 1.4; } .mono { font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum", "zero"; } .tnum { font-variant-numeric: tabular-nums; } button { font: inherit; color: inherit; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--signal-soft); color: var(--text); } /* small bits used everywhere */ .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex: none; } .kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; line-height: 1; padding: 2px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--surface); } .app-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; } .app-scrollbar::-webkit-scrollbar-track { background: transparent; } .app-scrollbar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .app-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; border: 3px solid transparent; } /* generic focus ring */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-radius: 4px; }