/* * vh-tokens.css — Classic VanHack tokens and shared component contracts. * * Sources (read-only): * - react-platform/platform/client/styles/theme.jsx (full palette + fonts + font sizes) * - react-platform/platform/client/vh-os-packages/Colors (flat palette) * - react-platform/platform/client/vh-os-packages/Components/Button[-New]/styles.js (button states) * - react-platform/platform/client/vh-os-packages/Components/Input|Chips|Modal (controls) * - react-platform/platform/client/vh-package/packages/colors (structured palette: danger/warning/success) * - next-platform/src/styles/tokens/colors.js (Tailwind scale used by marketing/talent) * Hex values validated live on vanhack.dev via getComputedStyle (2026-06-11). * * `vh-redesign.css` remaps these contracts for the product-default Redesign. * Classic remains a staff-only regression/reference skin. Canonical doc: * Documentation/design-system.md. * Rule for all agents: consume var(--vh-*) — never hardcode component colors. */ :root { /* ===== Shared color primitives ====================================== * First-party component styles consume these tokens instead of color * literals. `white` / `black` are deliberately fixed primitives; use the * semantic surface/text tokens below whenever a color should follow the * active Light/Dark appearance. */ --vh-color-white: #ffffff; --vh-color-black: #000000; --vh-transparent: transparent; --vh-on-primary: var(--vh-color-white); --vh-media-black: var(--vh-color-black); --vh-fixed-light-surface: var(--vh-color-white); --vh-fixed-light-ink: #292e33; --vh-fixed-light-body: #4f4f4f; --vh-fixed-light-muted: #788894; --vh-fixed-light-line: #e0e0e0; --vh-fixed-light-ink-rgb: 41 46 51; /* RGB channels let shadows, overlays and translucent accents remain token-driven without minting one token for every alpha value. */ --vh-white-rgb: 255 255 255; --vh-black-rgb: 0 0 0; --vh-primary-rgb: 6 117 206; --vh-primary-hover-rgb: 44 155 245; --vh-primary-hover-rgb-csv: 44, 155, 245; --vh-primary-active-rgb: 0 86 156; --vh-danger-rgb: 217 49 49; --vh-success-rgb: 39 174 96; --vh-warning-rgb: 252 171 16; --vh-cobalt-shadow-rgb: 16 24 40; /* ===== Primary (blue) — main actions, links, active states ===== */ --vh-primary: #0675ce; --vh-primary-hover: #2c9bf5; /* legacy "primary-light" */ --vh-primary-active: #00569c; /* legacy "primary-dark" */ --vh-primary-soft: rgba(44, 155, 245, 0.2); /* chips/selected backgrounds */ --vh-primary-lighter: #7cbdf3; /* ===== Secondary (orange) — secondary CTAs, attention highlights ===== */ --vh-secondary: #ef5c11; --vh-secondary-hover: #ff7b38; /* legacy "secondary-light" */ --vh-secondary-active: #c94400; /* legacy "secondary-dark" */ --vh-secondary-soft: rgba(255, 123, 56, 0.2); /* ===== Danger (red) — destructive actions, errors, error toasts ===== */ --vh-danger: #d93131; --vh-danger-hover: #d93131; /* legacy keeps same tone on hover */ --vh-danger-active: #b30e0e; /* legacy "red-dark" */ --vh-danger-light: #eb5757; /* legacy "red-light" (alerts/texts) */ --vh-danger-soft: rgba(238, 94, 95, 0.2); /* ===== Success (green) — confirmations, success toasts, match bars ===== */ --vh-success: #27ae60; --vh-success-hover: #219653; /* legacy "green-dark" */ --vh-success-active: #219653; --vh-success-light: #6fcf97; /* ===== Confirm (aqua) — “Request Interview” strong accept CTA ===== */ --vh-confirm: #30e3ca; --vh-confirm-hover: #2ccfb8; /* legacy "aqua-dark" */ --vh-confirm-text: #06463d; /* legacy "green-black" */ /* ===== Warning (yellow) — status pills, warnings ===== */ --vh-warning: #fcab10; --vh-warning-hover: #d68d00; /* legacy "yellow-dark" */ --vh-warning-light: #f2c94c; /* Candidate flags are fixed legacy signals, not theme warning/danger states. */ --vh-candidate-flag-red: #eb5757; --vh-candidate-flag-yellow: #fcab10; /* ===== Tertiary (teal) — gradients/illustrative accents ===== */ --vh-tertiary: #25c1cb; --vh-tertiary-light: #50e8f2; --vh-tertiary-dark: #059ca6; /* ===== Sky blue — legacy theme.jsx 'blue' (onboarding step-2 side panel) ===== */ --vh-blue-sky: #56ccf2; /* ===== Blue-20 — legacy pale blue (candidate-events empty-state blobs) ===== */ --vh-blue-20: #e8f4f8; /* ===== Legacy marketing aliases now promoted to real tokens ===== */ --vh-orange-400: #ff5f00; --vh-green-100: #d3efde; --vh-green-300: #17683a; --vh-blue-400: #237cc4; /* ===== Shared feature palettes ===================================== * These preserve the shipped Classic colors while keeping page CSS free * of literals. The Redesign skin remaps neutral aliases to Slate where a * feature surface should follow the new visual language. */ --vh-tailwind-gray-200: #e5e7eb; --vh-tailwind-gray-300: #d1d5db; --vh-tailwind-gray-500: #6b7280; --vh-tailwind-gray-600: #4b5563; --vh-slate-50: #f8fafc; --vh-slate-100: #f1f5f9; --vh-slate-200: #e2e8f0; --vh-slate-300: #cbd5e1; --vh-slate-400: #94a3b8; --vh-slate-500: #64748b; --vh-slate-600: #475569; --vh-slate-700: #334155; --vh-slate-800: #1e293b; --vh-slate-900: #0f172a; --vh-slate-950: #020617; --vh-green-500: #22c55e; --vh-green-600: #16a34a; --vh-green-500-rgb: 34 197 94; --vh-red-600: #dc2626; --vh-red-600-rgb: 220 38 38; --vh-bootstrap-danger-rgb: 220 53 69; --vh-tailwind-red-rgb: 239 68 68; --vh-amber-500: #f59e0b; --vh-amber-700: #b45309; --vh-amber-500-rgb: 245 158 11; --vh-rating-star: #f5b301; --vh-error-soft: #fdecec; --vh-error-ink: #7f1d1d; --vh-accent-staff: #6d49cb; --vh-accent-staff-hover: #4c2fa0; --vh-accent-staff-soft: #e4defa; --vh-success-soft: #ecfdf3; /* Exact Classic compatibility colors promoted from isolated component CSS. * New UI should prefer the semantic tokens above. These aliases let the * current screens preserve their shipped appearance while keeping color * literals centralized and available for Redesign remapping. */ --vh-raw-0891b2: #0891b2; --vh-raw-0e7490: #0e7490; --vh-raw-0e9aa7: #0e9aa7; --vh-raw-0ea5e9: #0ea5e9; --vh-raw-0f62fe: #0f62fe; --vh-raw-14b8a6: #14b8a6; --vh-raw-155a9e: #155a9e; --vh-raw-167542: #167542; --vh-raw-1b6dc1: #1b6dc1; --vh-raw-1b8f5a: #1b8f5a; --vh-raw-1d4ed8: #1d4ed8; --vh-raw-1e90ff: #1e90ff; --vh-raw-1f2937: #1f2937; --vh-raw-2563eb: #2563eb; --vh-raw-26374d: #26374d; --vh-raw-3f37c9: #3f37c9; --vh-raw-405067: #405067; --vh-raw-41505d: #41505d; --vh-raw-56aadf: #56aadf; --vh-raw-5d7189: #5d7189; --vh-raw-6d49cb: #6d49cb; --vh-raw-7a5200: #7a5200; --vh-raw-7c3aed: #7c3aed; --vh-raw-8b5cf6: #8b5cf6; --vh-raw-90ee90: #90ee90; --vh-raw-92400e: #92400e; --vh-raw-9a5b00: #9a5b00; --vh-raw-9aa3b2: #9aa3b2; --vh-raw-9fc7e8: #9fc7e8; --vh-raw-a87811: #a87811; --vh-raw-a9a9a9: #a9a9a9; --vh-raw-aaffdd: #aaffdd; --vh-raw-add8e6: #add8e6; --vh-raw-b45309: #b45309; --vh-raw-b9d4f0: #b9d4f0; --vh-raw-cde0f5: #cde0f5; --vh-raw-cfe0f3: #cfe0f3; --vh-raw-d6dde3: #d6dde3; --vh-raw-d8dde2: #d8dde2; --vh-raw-d97706: #d97706; --vh-raw-d9e1ec: #d9e1ec; --vh-raw-e58a00: #e58a00; --vh-raw-e5e7eb: #e5e7eb; --vh-raw-e8ecf2: #e8ecf2; --vh-raw-e8f1fb: #e8f1fb; --vh-raw-e9eef3: #e9eef3; --vh-raw-e9f8ef: #e9f8ef; --vh-raw-ede9fe: #ede9fe; --vh-raw-eef1f6: #eef1f6; --vh-raw-f4d58a: #f4d58a; --vh-raw-f4f7fe: #f4f7fe; --vh-raw-f5a623: #f5a623; --vh-raw-f7f9fc: #f7f9fc; --vh-raw-faf9ff: #faf9ff; --vh-raw-fb923c: #fb923c; --vh-raw-fdba74: #fdba74; --vh-raw-ff4500: #ff4500; --vh-raw-fff4e5: #fff4e5; --vh-raw-fff8e8: #fff8e8; --vh-raw-rgb-5-12-22: 5 12 22; --vh-raw-rgb-15-23-42: 15 23 42; --vh-raw-rgb-17-24-39: 17 24 39; --vh-raw-rgb-22-43-68: 22 43 68; --vh-raw-rgb-34-197-94: 34 197 94; --vh-raw-rgb-38-55-77: 38 55 77; --vh-raw-rgb-109-73-203: 109 73 203; --vh-raw-rgb-170-255-221: 170 255 221; --vh-raw-rgb-238-94-95: 238 94 95; --vh-raw-rgb-239-68-68: 239 68 68; --vh-raw-rgb-245-158-11: 245 158 11; /* Learning Hub owns one deliberate indigo-to-violet accent. */ --vh-lh-indigo-start: #4361ee; --vh-lh-indigo: #3f37c9; --vh-lh-violet: #7209b7; --vh-lh-indigo-start-rgb: 67 97 238; --vh-lh-indigo-rgb: 63 55 201; --vh-lh-violet-rgb: 114 9 183; --vh-lh-gradient: linear-gradient(218.67deg, var(--vh-lh-indigo-start) 12.63%, var(--vh-lh-indigo) 48.24%, var(--vh-lh-violet) 97.22%); --vh-lh-gradient-overlay: linear-gradient(218.67deg, rgb(var(--vh-lh-indigo-start-rgb) / 85%) 12.63%, rgb(var(--vh-lh-indigo-rgb) / 80%) 48.24%, rgb(var(--vh-lh-violet-rgb) / 85%) 97.22%); --vh-lh-live-surface: #1a5d93; --vh-lh-admin-gradient-start: #101c3d; --vh-lh-admin-gradient-end: #1c2f5e; --vh-lh-overlay-rgb: 15 27 50; /* Candidate profile/detail decorative values retained for Classic. */ --vh-profile-hero-glow-a: #dcefff; --vh-profile-hero-glow-b: #e7f2fe; --vh-profile-hero-surface: #fbfdff; --vh-profile-success-start: #2f8f5b; --vh-profile-success-end: #1f7a45; --vh-profile-dark-start: #1a2740; --vh-profile-dark-end: #0b1830; --vh-profile-green-bright: #34d27f; --vh-profile-neutral-start: #c8d0dc; --vh-profile-neutral-end: #a9b4c4; --vh-profile-copy: #3d4b5f; --vh-profile-copy-muted: #5b6b86; --vh-profile-separator: #b9c2cf; --vh-profile-icon-muted: #c2cbd8; --vh-profile-meta-muted: #9aa3b2; --vh-profile-line: #eef2f7; --vh-profile-soft: #eef1f6; --vh-profile-hover: #f7faff; --vh-profile-blue-hover: #e2f1fd; --vh-profile-ring-track: #e4e8f0; --vh-profile-page-surface: #f5f6f8; --vh-profile-list-hover: #f1f5fb; --vh-profile-error: #c0392b; --vh-media-deep: #0b1622; --vh-whatsapp: #128c4b; --vh-whatsapp-rgb: 37 211 102; /* Isolated legacy artwork gradients that remain identical in Classic. */ --vh-referral-warm-start: #ff5858; --vh-referral-warm-end: #f09819; --vh-referral-cyan: #00a6de; --vh-skeleton-base: #f2f2f2; --vh-skeleton-shine: #e9e9e9; --vh-loader-surface: #f1f1f2; /* ===== Blue-grays ("black-NN" in the legacy) — texts and cold surfaces ===== */ --vh-black-10: #f2f6f9; --vh-black-20: #dae0e6; --vh-black-30: #b8c3cc; --vh-black-40: #95a1ac; --vh-black-50: #788894; --vh-black-60: #58636d; --vh-black-70: #454d53; --vh-black-80: #3b4146; --vh-black-90: #292e33; --vh-black-100: #000000; /* ===== Neutral grays ("gray-NN" in the legacy) — borders, muted text ===== */ --vh-gray-10: #f7f7f7; --vh-gray-20: #f2f2f2; --vh-gray-30: #e0e0e0; --vh-gray-40: #bdbdbd; --vh-gray-50: #9f9f9f; --vh-gray-60: #828282; --vh-gray-70: #787878; --vh-gray-80: #646464; --vh-gray-90: #4f4f4f; --vh-gray-100: #333333; /* ===== Semantic text ===== */ --vh-text-heading: var(--vh-black-90); /* H1..H6 */ --vh-text-body: var(--vh-gray-90); /* inputs/body copy */ --vh-text-muted: var(--vh-black-50); /* secondary copy, menu items */ --vh-text-placeholder: var(--vh-gray-50); --vh-selection-text: var(--vh-primary-active); /* ===== Inputs ===== */ --vh-input-border: var(--vh-gray-30); --vh-input-focus: var(--vh-primary); --vh-input-error: var(--vh-danger); --vh-input-disabled-bg: var(--vh-gray-10); --vh-input-radius: 6px; --vh-control-height: 40px; /* ===== Disabled (buttons) ===== */ --vh-disabled-bg: var(--vh-black-10); --vh-disabled-text: var(--vh-black-40); /* ===== Radius ===== */ --vh-radius-sm: 3px; /* Button-New, modal action buttons, board text-buttons */ --vh-radius: 4px; /* VHButton (canonical button), chips */ --vh-radius-md: 6px; /* inputs, board cards */ --vh-radius-lg: 9px; /* modals */ --vh-radius-pill: 32px; /* status pills (HIRED / FINAL), round chips */ /* ===== Surface hierarchy ===== Content stays flat and uses borders for structure. Shadows are reserved for UI that floats above the page: popovers, drawers and modals. */ --vh-shadow-surface: none; --vh-shadow-surface-hover: none; --vh-shadow-card: var(--vh-shadow-surface); --vh-shadow-pop: 0 2px 10px rgba(0, 0, 0, 0.2); /* dropdown menus / popovers */ --vh-shadow-modal: 0 4px 14px rgba(0, 0, 0, 0.1); /* ===== Modal overlay ===== */ --vh-overlay: rgba(0, 0, 0, 0.75); /* ===== Fonts (legacy: Inter primary, Roboto controls, Nunito Sans headings) ===== */ --vh-font-primary: 'Inter', 'Roboto', sans-serif; --vh-font-secondary: 'Roboto', sans-serif; --vh-font-heading: 'Nunito Sans', sans-serif; } /* ===================================================================== * Button utilities — port of vh-os-packages/Components/Button/styles.js * Each variant class is self-sufficient (base styles applied per class). * Sizes: default h32/fs14 ("sm" in legacy), .vh-btn-lg h40/fs16, .vh-btn-xs h24/fs12. * ===================================================================== */ .vh-btn, .vh-btn-primary, .vh-btn-secondary, .vh-btn-danger, .vh-btn-success, .vh-btn-confirm, .vh-btn-outline-primary, .vh-btn-outline-secondary, .vh-btn-outline-danger, .vh-btn-text { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 16px; border: 1px solid var(--vh-transparent); border-radius: var(--vh-radius); font-family: var(--vh-font-secondary); font-size: 14px; line-height: 18px; font-weight: 400; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .vh-btn:focus, .vh-btn-primary:focus, .vh-btn-secondary:focus, .vh-btn-danger:focus, .vh-btn-success:focus, .vh-btn-confirm:focus, .vh-btn-outline-primary:focus, .vh-btn-outline-secondary:focus, .vh-btn-outline-danger:focus, .vh-btn-text:focus { outline-style: none; } /* --- solid variants --- */ .vh-btn-primary { background-color: var(--vh-primary); border-color: var(--vh-primary); color: var(--vh-on-primary); } .vh-btn-primary:hover { background-color: var(--vh-primary-hover); border-color: var(--vh-primary-hover); color: var(--vh-on-primary); } .vh-btn-primary:active { background-color: var(--vh-primary-active); border-color: var(--vh-primary-active); } .vh-btn-secondary { background-color: var(--vh-secondary); border-color: var(--vh-secondary); color: var(--vh-on-primary); } .vh-btn-secondary:hover { background-color: var(--vh-secondary-hover); border-color: var(--vh-secondary-hover); color: var(--vh-on-primary); } .vh-btn-secondary:active { background-color: var(--vh-secondary-active); border-color: var(--vh-secondary-active); } .vh-btn-danger { background-color: var(--vh-danger); border-color: var(--vh-danger); color: var(--vh-on-primary); } .vh-btn-danger:hover { background-color: var(--vh-danger-hover); border-color: var(--vh-danger-hover); color: var(--vh-on-primary); } .vh-btn-danger:active { background-color: var(--vh-danger-active); border-color: var(--vh-danger-active); } .vh-btn-success { background-color: var(--vh-success); border-color: var(--vh-success); color: var(--vh-on-primary); } .vh-btn-success:hover { background-color: var(--vh-success-hover); border-color: var(--vh-success-hover); color: var(--vh-on-primary); } .vh-btn-success:active { background-color: var(--vh-success-active); border-color: var(--vh-success-active); } /* "Request Interview" CTA (ProfileModal): aqua bg, dark-green bold text */ .vh-btn-confirm { background-color: var(--vh-confirm); border-color: var(--vh-confirm); color: var(--vh-confirm-text); font-family: var(--vh-font-primary); font-weight: 700; } .vh-btn-confirm:hover { background-color: var(--vh-confirm-hover); border-color: var(--vh-confirm-hover); color: var(--vh-confirm-text); } .vh-btn-confirm:active { background-color: var(--vh-confirm-hover); border-color: var(--vh-confirm-hover); } /* --- outline variants (legacy OutlinedButton: fill on hover) --- */ .vh-btn-outline-primary { background-color: var(--vh-transparent); border-color: var(--vh-primary); color: var(--vh-primary); } .vh-btn-outline-primary:hover { background-color: var(--vh-primary-hover); border-color: var(--vh-primary-hover); color: var(--vh-on-primary); } .vh-btn-outline-primary:active { background-color: var(--vh-primary-active); border-color: var(--vh-primary-active); color: var(--vh-on-primary); } .vh-btn-outline-secondary { background-color: var(--vh-transparent); border-color: var(--vh-secondary); color: var(--vh-secondary); } .vh-btn-outline-secondary:hover { background-color: var(--vh-secondary-hover); border-color: var(--vh-secondary-hover); color: var(--vh-on-primary); } .vh-btn-outline-secondary:active { background-color: var(--vh-secondary-active); border-color: var(--vh-secondary-active); color: var(--vh-on-primary); } .vh-btn-outline-danger { background-color: var(--vh-transparent); border-color: var(--vh-danger); color: var(--vh-danger); } .vh-btn-outline-danger:hover { background-color: var(--vh-danger-active); border-color: var(--vh-danger-active); color: var(--vh-on-primary); } .vh-btn-outline-danger:active { background-color: var(--vh-danger-active); border-color: var(--vh-danger-active); color: var(--vh-on-primary); } /* --- text button (board BOOK A CALL / REJECT, modal Cancel) --- */ .vh-btn-text { background-color: var(--vh-transparent); border-color: var(--vh-transparent); color: var(--vh-primary); border-radius: var(--vh-radius-sm); } .vh-btn-text:hover { background-color: var(--vh-gray-10); } .vh-btn-text:active { background-color: var(--vh-gray-20); } .vh-btn-text.vh-btn-muted { color: var(--vh-gray-90); } .vh-btn-text.vh-btn-danger-text { color: var(--vh-danger); } /* --- disabled (same look for every variant in the legacy) --- */ .vh-btn:disabled, .vh-btn-primary:disabled, .vh-btn-secondary:disabled, .vh-btn-danger:disabled, .vh-btn-success:disabled, .vh-btn-confirm:disabled, .vh-btn-outline-primary:disabled, .vh-btn-outline-secondary:disabled, .vh-btn-outline-danger:disabled, .vh-btn-text:disabled, .vh-btn.disabled { color: var(--vh-disabled-text); background-color: var(--vh-disabled-bg); border-color: var(--vh-disabled-bg); cursor: not-allowed; } /* --- sizes --- */ .vh-btn-xs { height: 24px; font-size: 12px; line-height: 16px; padding: 0 10px; } .vh-btn-lg { height: 40px; font-size: 16px; line-height: 20px; padding: 0 20px; } .vh-btn-full { width: 100%; } /* ===================================================================== * Input utility — port of vh-os-packages/Components/Input/Simple * ===================================================================== */ .vh-input { width: 100%; padding: 9px 12px; border: 1px solid var(--vh-input-border); border-radius: var(--vh-input-radius); background: var(--vh-transparent); color: var(--vh-text-body); font-family: var(--vh-font-secondary); font-size: 14px; line-height: 1.53; outline: 0; box-sizing: border-box; } .vh-input::placeholder { color: var(--vh-text-placeholder); font-size: 14px; } .vh-input:focus { border-color: var(--vh-input-focus); } .vh-input.vh-input-error, .vh-input:user-invalid { color: var(--vh-input-error); border-color: var(--vh-input-error); } .vh-input:disabled { background-color: var(--vh-input-disabled-bg); } /* ===================================================================== * Chips & status pills * ===================================================================== */ /* Selected/filter chip (vh-os Chips): soft blue bg */ .vh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--vh-primary-soft); border: 1px solid var(--vh-primary-hover); border-radius: var(--vh-radius); color: var(--vh-black-50); font-family: var(--vh-font-secondary); font-size: 12px; line-height: 16px; } .vh-chip-round { border-radius: 20px; } .vh-chip-secondary { background: var(--vh-secondary-soft); border-color: var(--vh-secondary); } .vh-chip-danger { background: var(--vh-danger-soft); border-color: var(--vh-danger); } /* Card skill chip (pipeline board): light gray pill */ .vh-chip-gray { background: var(--vh-black-10); border-color: var(--vh-transparent); border-radius: var(--vh-radius-pill); color: var(--vh-black-60); } /* Status pill (board: FINAL / HIRED / Company Interview canceled) */ .vh-pill { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--vh-radius-pill); font-family: var(--vh-font-primary); font-size: 12px; line-height: 16px; } .vh-pill-warning { background: var(--vh-warning); color: var(--vh-black-90); } .vh-pill-danger { background: var(--vh-danger); color: var(--vh-gray-20); } .vh-pill-success { background: var(--vh-success); color: var(--vh-on-primary); } .vh-pill-primary { background: var(--vh-primary); color: var(--vh-on-primary); } /* ===================================================================== * COBALT — light, on-brand system introduced in the 2026-06 UI/UX sweep. * * NOT a legacy extraction: this is the newer card aesthetic shipped across * /jobs (board card), /talent-pool, /job/{id}, /my-jobs and the * interview-pipeline candidate card. The blues reuse the existing * --vh-primary* tokens (Cobalt BLUE #2c9bf5 = --vh-primary-hover, * BLUE_DARK #0675ce = --vh-primary, BLUE_DEEP #00569c = --vh-primary-active); * what is new here is the neutral/surface scale, the soft card shadow + * hover-lift, the TONAL status pills (soft bg + dark text, not loud fills), * the soft skill chip and the gradient primary button. * * Consume these like the legacy tokens (var(--vh-*) / .vh-* classes); the * existing Cobalt pages hardcode the same literals inline — new pages should * reference these instead of re-hardcoding. Doc: Documentation/design-system.md §10. * ===================================================================== */ :root { /* ---- Cobalt neutrals + surfaces (new) ---- */ --vh-ink: #16202e; /* card titles / strong headings */ --vh-body: #5b6676; /* body copy on Cobalt cards */ --vh-muted: #8a94a3; /* secondary/meta copy, lightened icons */ --vh-line: #e6ebf2; /* hairline card border / dividers */ --vh-line-strong: #dbe2ec; /* stronger divider */ --vh-surface: #ffffff; /* card surface */ --vh-surface-soft: #f4f7fb; /* soft chip bg, inset panels */ --vh-blue-tint: #eef7fe; /* hover/selected tint, blue-tonal pill bg */ --vh-blue-deep: var(--vh-primary-active); /* #00569c — soft-chip text */ --vh-primary-pale: #d5f2fb; /* active cards / add-to-calendar accent */ /* ---- Content-surface geometry ---- */ --vh-radius-card: 16px; /* board/detail/my-jobs cards */ --vh-radius-card-sm: 12px; /* interview-pipeline candidate card */ --vh-radius-chip: 8px; /* soft chips */ --vh-shadow-cobalt: var(--vh-shadow-surface); --vh-shadow-cobalt-lift: var(--vh-shadow-surface-hover); /* ---- Tonal status colors (soft bg + dark text + subtle border) ---- */ --vh-tonal-green-text: #15803d; --vh-tonal-green-bg: rgba(34, 197, 94, 0.12); --vh-tonal-green-bd: rgba(34, 197, 94, 0.3); --vh-tonal-amber-text: #b45309; --vh-tonal-amber-bg: rgba(245, 158, 11, 0.13); --vh-tonal-amber-bd: rgba(245, 158, 11, 0.32); --vh-tonal-red-text: #991b1b; --vh-tonal-red-bg: #fee2e2; --vh-tonal-red-bd: rgba(239, 68, 68, 0.3); --vh-tonal-blue-text: var(--vh-primary-active); /* #00569c */ --vh-tonal-blue-bg: var(--vh-blue-tint); /* #eef7fe */ --vh-tonal-blue-bd: rgba(44, 155, 245, 0.3); --vh-tonal-purple-text: #6d28d9; /* hybrid work-mode pill */ --vh-tonal-purple-bg: rgba(124, 58, 237, 0.1); --vh-tonal-purple-bd: rgba(124, 58, 237, 0.28); --vh-tonal-slate-text: #475569; /* onsite work-mode pill */ --vh-tonal-slate-bg: rgba(100, 116, 139, 0.1); --vh-tonal-slate-bd: rgba(100, 116, 139, 0.26); /* ---- Hot (admin-pinned) job accents (/jobs board) ---- */ --vh-hot-gradient: linear-gradient(135deg, #ff2d49, #ff5a3c); --vh-hot-ring: rgba(239, 68, 68, 0.4); /* ---- Cobalt primary gradient (apply CTAs) ---- */ --vh-gradient-primary: linear-gradient(135deg, var(--vh-primary-hover) 0%, var(--vh-primary) 100%); } /* Standard flat content surface. Interactive cards communicate hover through * their border, not through decorative depth or vertical movement. */ .vh-card { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card); box-shadow: var(--vh-shadow-cobalt); font-family: var(--vh-font-primary); } .vh-card-sm { border-radius: var(--vh-radius-card-sm); } .vh-card-lift { transition: border-color 0.18s ease; } .vh-card-lift:hover { border-color: var(--vh-primary-hover); box-shadow: var(--vh-shadow-cobalt-lift); } /* Cobalt list row — THE standard pattern for admin/staff listings (companies, * skills, email-logs, ...): each item is a card on the theme background, with * the same border-only hover. Consume from page markup; page-scoped CSS * only adds the page's internal columns. */ .vh-row-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .vh-row-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-card-sm); box-shadow: var(--vh-shadow-cobalt); font-family: var(--vh-font-primary); transition: border-color 0.18s ease; } .vh-row-card.clickable { cursor: pointer; } .vh-row-card.clickable:hover { border-color: var(--vh-primary-hover); box-shadow: var(--vh-shadow-cobalt-lift); } /* Tonal status pill (soft bg + dark text + subtle border) — calm, not loud. */ .vh-pill-tonal { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--vh-transparent); border-radius: 999px; font-family: var(--vh-font-primary); font-size: 12px; line-height: 18px; font-weight: 600; } .vh-pill-tonal-green { background: var(--vh-tonal-green-bg); color: var(--vh-tonal-green-text); border-color: var(--vh-tonal-green-bd); } .vh-pill-tonal-amber { background: var(--vh-tonal-amber-bg); color: var(--vh-tonal-amber-text); border-color: var(--vh-tonal-amber-bd); } .vh-pill-tonal-red { background: var(--vh-tonal-red-bg); color: var(--vh-tonal-red-text); border-color: var(--vh-tonal-red-bd); } .vh-pill-tonal-blue { background: var(--vh-tonal-blue-bg); color: var(--vh-tonal-blue-text); border-color: var(--vh-tonal-blue-bd); } .vh-pill-tonal-purple { background: var(--vh-tonal-purple-bg); color: var(--vh-tonal-purple-text); border-color: var(--vh-tonal-purple-bd); } .vh-pill-tonal-slate { background: var(--vh-tonal-slate-bg); color: var(--vh-tonal-slate-text); border-color: var(--vh-tonal-slate-bd); } /* Soft skill/meta chip (Cobalt board + cards). */ .vh-chip-soft { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--vh-surface-soft); border: 1px solid var(--vh-line); border-radius: var(--vh-radius-chip); color: var(--vh-blue-deep); font-family: var(--vh-font-primary); font-size: 12px; line-height: 16px; font-weight: 600; } /* Gradient primary button (apply / strong CTA on Cobalt pages). */ .vh-btn-gradient { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; height: 40px; border: 0; border-radius: 10px; background: var(--vh-gradient-primary); color: var(--vh-on-primary); font-family: var(--vh-font-primary); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 18px -8px rgb(var(--vh-primary-hover-rgb) / 0.7); transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; white-space: nowrap; } .vh-btn-gradient:hover { filter: brightness(1.04); box-shadow: 0 10px 22px -8px rgb(var(--vh-primary-hover-rgb) / 0.8); } .vh-btn-gradient:active { transform: translateY(1px); } .vh-btn-gradient:disabled { background: var(--vh-disabled-bg); color: var(--vh-disabled-text); box-shadow: none; cursor: not-allowed; } /* ===================================================================== * DARK MODE — token remap layer for the LeptonX dark theme. * * LeptonX toggles the `.lpx-theme-dark` class and swaps a per-theme var * file. Verified LeptonX 5.4.0 dark values (side-menu/css/dark.css): * --lpx-content-bg #121212 · --lpx-card-bg #1b1b1b · --lpx-border-color #222 * --lpx-content-text #9ca5b4 · --lpx-card-title-text-color #eee * Where clean, VanHack surfaces anchor on those vars (with the dark value * as fallback); the rest is a hand-tuned dark blue-gray ramp that keeps * the Cobalt character while sitting naturally on LeptonX dark chrome. * * NOTE — `.lpx-theme-dim` is deliberately NOT included: in LeptonX 5.x the * "dim" theme is dark chrome + LIGHT content area (dim.css: --lpx-card-bg * var(--vh-on-primary), --lpx-content-bg #f5f5f7), so the light VanHack tokens are * already correct there. If a future LeptonX version makes dim's content * area dark, add `.lpx-theme-dim` to the selector below. * * Contract for page authors (Documentation/design-system.md "Dark mode"): * - consume var(--vh-*) — the flip below is then automatic; * - the --vh-black-NN and --vh-gray-NN ladders are FLIPPED here * (10 = subtle dark surface tint … 90 = near-white text, 100 = var(--vh-on-primary)); * - brand action colors (--vh-primary/secondary/danger/success/confirm/ * warning/tertiary) do NOT change — white text on those stays var(--vh-on-primary); * - page-local `.lpx-theme-dark` overrides only for true exceptions * (e.g. photo/illustration overlays), scoped and commented. * ===================================================================== */ .lpx-theme-dark { color-scheme: dark; /* ---- Surfaces & lines (anchored on LeptonX where clean) ---- */ --vh-surface: var(--lpx-card-bg, #1b1b1b); --vh-surface-soft: #232a33; /* soft chip bg / inset panels */ --vh-line: #2a313b; /* hand-tuned: lpx #222 is too faint for card definition */ --vh-line-strong: #333c47; /* ---- Cobalt ink (anchored on LeptonX text colors) ---- */ --vh-ink: var(--lpx-card-title-text-color, #e9edf3); --vh-body: var(--lpx-content-text, #9ca5b4); --vh-muted: #7d8896; /* ---- Blue-gray ladder ("black-NN") — FLIPPED ---- 10 stays a subtle dark surface tint; 90 becomes near-white text. */ --vh-black-10: #222933; --vh-black-20: #2b3340; --vh-black-30: #3a4452; --vh-black-40: #556170; --vh-black-50: #8a95a5; --vh-black-60: #a6b0be; --vh-black-70: #bfc8d3; --vh-black-80: #d3dae3; --vh-black-90: #e8edf3; --vh-black-100: #ffffff; /* ---- Neutral gray ladder ("gray-NN") — FLIPPED likewise ---- */ --vh-gray-10: #262626; --vh-gray-20: #2e2e2e; --vh-gray-30: #3d3d3d; --vh-gray-40: #555555; --vh-gray-50: #8f8f8f; --vh-gray-60: #a3a3a3; --vh-gray-70: #b0b0b0; --vh-gray-80: #c2c2c2; --vh-gray-90: #d6d6d6; --vh-gray-100: #ececec; /* ---- Semantic text / input / disabled — re-declared so the flip holds no matter which element carries the theme class ---- */ --vh-text-heading: var(--vh-black-90); --vh-text-body: var(--vh-gray-90); --vh-text-muted: var(--vh-black-50); --vh-text-placeholder: var(--vh-gray-50); --vh-selection-text: var(--vh-primary-lighter); --vh-input-border: var(--vh-gray-30); --vh-input-disabled-bg: var(--vh-gray-10); --vh-disabled-bg: var(--vh-black-10); --vh-disabled-text: var(--vh-black-40); /* ---- Blue tints (bgs darken; blue-deep is TEXT so it lightens to keep AA on the dark soft-chip background) ---- */ --vh-blue-tint: #14283a; --vh-primary-pale: #0e3a5c; --vh-blue-deep: #5fb2f2; /* ---- Tonal pills: soft alpha bgs survive dark; texts lighten. Red bg was a solid light pink — switch to alpha like its siblings. ---- */ --vh-tonal-green-text: #4ade80; --vh-tonal-amber-text: #fbbf24; --vh-tonal-red-text: #f87171; --vh-tonal-red-bg: rgba(239, 68, 68, 0.14); --vh-tonal-blue-text: var(--vh-primary-hover); --vh-tonal-blue-bg: var(--vh-blue-tint); --vh-tonal-purple-text: #a78bfa; --vh-tonal-slate-text: #94a3b8; --vh-blue-20: #14283a; /* pale-blue illustration tint -> dark blue tint */ /* ---- Content remains flat; overlays deepen on dark surfaces ---- */ --vh-shadow-surface: none; --vh-shadow-surface-hover: none; --vh-shadow-card: var(--vh-shadow-surface); --vh-shadow-pop: 0 2px 10px rgba(0, 0, 0, 0.55); --vh-shadow-modal: 0 4px 14px rgba(0, 0, 0, 0.5); --vh-shadow-cobalt: var(--vh-shadow-surface); --vh-shadow-cobalt-lift: var(--vh-shadow-surface-hover); /* --vh-overlay stays rgb(var(--vh-black-rgb) / .75) — still correct on dark. */ } /* Utility-class exceptions: loud pills keep their BRAND fills on dark, so * their text must NOT follow the flipped ladders — pin the light-mode ink. */ .lpx-theme-dark .vh-pill-warning { color: var(--vh-fixed-light-ink); } /* dark ink on amber (light-mode --vh-black-90) */ .lpx-theme-dark .vh-pill-danger { color: var(--vh-skeleton-base); } /* light text on red (light-mode --vh-gray-20) */ /* ===================================================================== * Blazorise/Bootstrap interop for the .vh-btn-* utilities. * A Blazorise