/** * Vanceli - Design Tokens * ---------------------------------------------------------------------------- * Source of truth: /design.md §1 (Color System), §2.1 (Type Scale), * §3.1-§3.7 (Layout Foundations). Every value below is a direct transcription * of a token documented there - do not hand-edit a color/size here without * updating design.md first (instructions.md rule 2). * * ── "Vertex" revamp (platform-wide visual language) ───────────────────────── * The palette is built from TWO brand seeds (design.md §1.1): * - Accent seed #2941B9 = accent-700 (indigo - the brand pop / button) * - Primary seed #061B31 = primary-950 (dark navy - ink & dark surface) * Both are expanded into full tonal scales (§1.2) and mapped to semantic * tokens (§1.4). The aesthetic is line-based, mostly-white, pill-radius, with * minimal shadow - see design.md §3. * * ⚠️ Brand-indigo rule (design.md §1.1): the accent-700 seed (#2941B9) is a * dark-enough indigo to carry white text (8.2:1, AAA). Use it by role: * - tints / active-nav / hover / tag & badge fills → accent-50 / accent-100 * - accent TEXT, links, focus rings → accent-600 / accent-700 * - filled buttons with white text → accent-700 (#2941B9) * - large text / UI (≥3:1) → accent-500 * - accent-300 as a POP color → dark surfaces only * Never place white text on a light stop (accent-50..400) - it fails contrast. * * Theme switching model (design.md §1.5 + implementation plan) - UNCHANGED * architecture (theme-init.js / theme.js): * - Light mode values live on :root (the default). * - Dark mode values apply when the OS prefers dark AND the user has not * manually overridden the theme (prefers-color-scheme block), OR when * [data-theme="dark"] is set on (manual override, see theme.js). * - [data-theme="light"] forces light mode even if the OS prefers dark. * - The inline anti-FOUC script in each page's sets data-theme * before this stylesheet paints, so there is no flash of the wrong theme. */ :root { /* ========================================================================== 1. PRIMITIVE SCALES (design.md §1.1-§1.3) - raw hex, theme-independent. Never consume a primitive directly in a component; consume the SEMANTIC tokens in section 2 so light/dark parity comes for free. Primitives exist so the semantic layer (and both dark blocks) can reference one source. ========================================================================== */ /* ---- Accent scale (seed = accent-700 #2941B9 indigo, design.md §1.2) ---- Saturated indigo. The consumed --accent is the 700 stop (#2941B9), which takes white text (8.2:1, AAA). Contrast on white (design.md §4.1): 600 = 6.5 (AA), 700 = 8.2 (AAA), 800 = 10.9, 900 = 13.4. 300/400/500 are large-text / UI / dark-mode-pop stops (the #2941B9 seed is fill+white-text). */ --accent-50: #eff2fc; --accent-100: #dfe5f9; --accent-200: #c3cef2; --accent-300: #a0b1ea; --accent-400: #6c81dd; --accent-500: #4560d0; --accent-600: #3149c2; --accent-700: #2941b9; /* SEED - indigo (filled --accent, white text) */ --accent-800: #22368f; --accent-900: #1a2a6e; /* ---- Primary scale (seed = primary-950 #061B31 dark navy, design.md §1.2) ---- Deep dark navy. The light-mode ink color (950) and fixed-dark brand surface. 500 = ~6.5 on white (AA muted-text), 700 = ~11, 950 = ~17 (AAA). Light stops remain available as hue-consistent brand tints. */ --primary-50: #e9eef4; --primary-100: #c9d5e3; --primary-200: #9cb0c8; --primary-300: #6885a5; --primary-400: #42607f; --primary-500: #2a4763; --primary-600: #1f384f; --primary-700: #16293b; --primary-800: #0f2941; --primary-900: #0b2138; --primary-950: #061b31; /* SEED - dark navy */ /* ---- Cool neutral scale (design.md §1.3) ---- NOT hue-less gray: primary-950's navy hue blended toward white, so every line/border/hover-fill stays harmonized with the brand (blue-tinted, not a generic gray). Contrast on white (design.md §4.1): neutral-600 = ~7.7 (AAA text), neutral-500 = ~4.8 (AA text), neutral-400 = ~3.0 (borders/large only), neutral-200/300 = decorative hairlines (dividers/input edges; the AA- relevant field state is carried by the accent focus ring, not the edge). */ --neutral-25: #fbfcfd; --neutral-50: #f4f6f9; --neutral-100: #e9edf2; --neutral-200: #d4dbe3; --neutral-300: #b1bcc8; --neutral-400: #8492a1; --neutral-500: #5e6b7b; --neutral-600: #3e4b5a; --neutral-700: #263340; --neutral-800: #14202d; --neutral-900: #07131f; /* ---- Dark-theme neutral scale (design.md §1.3) ---- Dark mode uses a neutral charcoal canvas rather than the primary navy scale. The requested #111111 canvas and #191919 surface are intentionally close, so readable text and perceivable controls use dedicated neutral stops instead of inheriting blue-tinted primary values. */ --dark-canvas: #111111; --dark-surface: #191919; --dark-border: #3a3a3a; --dark-border-strong: #686868; --dark-text-secondary: #c7c7c7; --dark-text-muted: #a3a3a3; --dark-text-disabled: #737373; /* ---- Semantic status primitives (design.md §1.4) ---- Chosen to pass AA on white at body size and stay harmonious with the green brand (Info is a teal-cyan, distinct from the brand green). Contrast on white: success 5.02 · warning 5.02 · error 6.47 · info 5.36 (all ✅ AA). The *-bg tints are LIGHT-MODE ONLY (see the dark blocks: only the foregrounds flip; banners/badges swap the tint for a neutral surface). */ --color-success: #15803d; --color-success-bg: #dcfce7; --color-warning: #b45309; --color-warning-bg: #fef3c7; --color-error: #b91c1c; --color-error-bg: #fee2e2; --color-info: #0e7490; --color-info-bg: #cffafe; /* ---- Fixed system primitives (design.md §1.4) ---- Named so surfaces that stay DARK in BOTH themes (the app-shell sidebar in dark mode, the auth promo aside, the footer - design.md §6/§16.1) can reference a non-flipping literal. */ --color-white: #ffffff; /* ---- Fixed-brand banner primitives (design.md §1.5 + §13.2) ---- The candidate welcome banner is a THEME-INVARIANT fixed-BRAND surface - the same "stays the same in both themes" idea as the fixed-DARK footer / auth-promo (which use --color-white), but branded indigo because it is backed by a fixed saturated image (assets/img/background.png); flipping its colors per theme would fight the artwork. Defined ONCE here and deliberately NOT overridden in the dark blocks below. --welcome-banner-surface takes white text at 8.2:1 (AAA); the two rgba tokens are translucent-white overlays (raw values live here in tokens.css by design - components consume the token, never the literal). */ --welcome-banner-surface: var(--accent-700); /* #2941B9 fallback fill under the image */ --welcome-banner-ink: var(--color-white); /* heading/body/icon - non-flipping */ --welcome-banner-ink-soft: rgba(255, 255, 255, 0.82); /* eyebrow / subtext / toggle glyph */ --welcome-banner-chip: rgba(255, 255, 255, 0.14); /* check-icon chip + toggle hover fill */ /* Action-button set (the 2x2 grid on the banner's right side). These sit over the artwork's busiest region, so the fill is opaque ENOUGH on its own: the button never relies on backdrop-filter (progressive enhancement only) or on what happens to be behind it. */ --welcome-banner-action-bg: rgba(255, 255, 255, 0.16); --welcome-banner-action-bg-hover: rgba(255, 255, 255, 0.28); --welcome-banner-action-border: rgba(255, 255, 255, 0.38); /* Scrim laid over the artwork behind the actions column so white button text keeps its contrast wherever the image happens to go light (design.md §4.1). */ --welcome-banner-scrim: rgba(41, 65, 185, 0.94); /* ========================================================================== 2. SEMANTIC TOKENS - LIGHT MODE (design.md §1.5) These are what every component consumes. Never hardcode a hex in a component; reference the token so dark mode + theming work automatically. ========================================================================== */ /* ---- Surfaces ---- */ --bg-base: var(--color-white); /* page canvas - white (§1.5) */ --bg-surface: var(--neutral-25); /* cards, panels */ --bg-elevated: var(--neutral-50); /* modals, popovers, dropdowns, hover fills */ /* Tooltip surface (design.md §10, components.md §93). Deliberately NOT --bg-elevated: a tooltip's only job is to be read instantly against whatever it happens to float over, and this one floats over the accent-filled bulk pill, where a near-white panel reads as another chip on the bar rather than as an annotation above it. A dark neutral inverts against every surface in the app, which is what makes it recognisable as a tooltip rather than a popover. Flipped in both dark blocks below. */ --tooltip-bg: var(--neutral-800); --tooltip-text: var(--color-white); /* App-shell sidebar surface (design.md §6.1). Plain white in light mode, separated from the content canvas by the border-right hairline. In dark mode it resolves to the #191919 --bg-surface via the blocks below. */ --sidebar-bg: var(--color-white); /* ---- Borders / dividers (line-based separation, design.md §3.4) ---- */ --border-default: var(--neutral-200); /* dividers, input edges, sidebar border-right */ --border-strong: var(--neutral-400); /* emphasized borders */ /* ---- Text ---- */ --text-primary: var(--primary-950); /* body + headings - ~17.5:1 on white (AAA) */ --text-secondary: var(--neutral-600); /* helper/caption/metadata - 7.56:1 (AAA) */ --text-muted: var(--neutral-500); /* quiet meta / placeholders - 4.68:1 (AA) */ --text-disabled: var(--neutral-400); /* disabled labels (WCAG-exempt) */ --text-inverse: var(--color-white); /* text on accent-filled / dark surfaces */ /* ---- Icons ---- */ --icon-default: var(--primary-950); --icon-muted: var(--neutral-500); /* Overlay close (x) glyph size - design.md §3.7's 20px default, tokenized so every overlay's close control resolves to one value. Theme-independent. */ --icon-size-close: 1.25rem; /* ---- Default avatar illustration (design.md §9, components.md §78) ---- The gender-derived silhouette shown for candidates with no profile photo (the photo is optional). It needs its OWN pair rather than reusing --bg-elevated/--icon-muted because it is full-bleed artwork, not a small centred glyph: --icon-muted at that coverage reads as a heavy dark blob that pulls more attention than the real photos beside it. These are one step quieter, so a missing photo recedes instead of shouting. Light = a slightly-tinted disc with a mid-neutral figure (~2.6:1); the dark values below mirror the same relative step on the navy ladder. */ --avatar-illustration-surface: var(--neutral-100); --avatar-illustration-figure: var(--neutral-400); /* ---- Accent roles (design.md §1.5, "brand green used correctly") ---- --accent : filled-button / active-state FILL (needs white text) --accent-hover : hover for filled accent controls --accent-text : accent TEXT & links on the page canvas (5.04:1 min) --accent-tint : subtle accent FILL - active nav / tag / badge bg --accent-tint-strong : the heavier tint step (hover on a tinted control) --accent-ink : text/icon ON an accent tint (6.48:1 on accent-50) --accent-tint-border : border of a tinted/applied control --focus-ring : 2px ring color (design.md §4.2) */ --accent: var(--accent-700); /* #2941B9 - white text = 8.2:1 (AAA) */ --accent-hover: var(--accent-800); /* #22368F */ --accent-text-on: var(--color-white); /* text on a filled --accent button */ --accent-text: var(--accent-600); /* #3149C2 link/accent text = 6.5:1 (AA) */ --accent-tint: var(--accent-50); /* #EFF2FC active-nav / tag fill */ --accent-tint-strong: var(--accent-100); /* #DFE5F9 tint hover step */ --accent-ink: var(--accent-700); /* #2941B9 on tint = 7.5:1 (AAA) */ --accent-tint-border: var(--accent-200); /* #C3CEF2 */ --focus-ring: var(--accent-600); /* #3149C2 ring - 3:1+ on white (§4.2) */ /* ---- Neutral hover fill (app-shell nav hover, ghost-button hover) ---- */ --hover-surface: var(--neutral-100); /* ========================================================================== 3. TYPOGRAPHY (design.md §2) Inter for all UI + headings (Plus Jakarta Sans dropped in the revamp); IBM Plex Mono retained for genuine tabular data only (§2 rules). ========================================================================== */ --font-display: "Inter", "Segoe UI", system-ui, sans-serif; /* headings - Inter */ --font-body: "Inter", "Segoe UI", system-ui, sans-serif; /* body / UI */ --font-mono: "IBM Plex Mono", "Consolas", monospace; /* tabular data */ --text-display: 3.75rem; --text-h1: 3rem; --text-h2: 2.25rem; --text-h3: 1.875rem; --text-h4: 1.5rem; --text-h5: 1.25rem; --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; /* Below text-xs (12px) - the app-shell rail's collapsed micro-label floor (design.md §6.1). Not part of the modular scale. */ --text-2xs: 0.625rem; /* 10px */ /* ========================================================================== 4. SPACING (8pt system, design.md §3.1) ========================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; /* ========================================================================== 5. RADIUS (design.md §3.3) - pill-first language. The revamp is pill-based: inputs, buttons, chips, tags and the search field all round to --radius-pill (999px); cards, modals and selects use --radius-md (8px). --radius-xs/sm kept for small internal marks. ========================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* cards, selects, modals, popovers */ --radius-lg: 12px; /* large surfaces, image containers */ --radius-pill: 999px; /* inputs, buttons, chips, tags, search field, avatars */ --radius-full: 9999px; /* full circles (icon-buttons, avatars, status dots) */ /* ========================================================================== 6. ELEVATION (design.md §3.4) - minimal, cool-tinted shadows. The line-based aesthetic leans on borders, not shadows; shadows are reserved for genuinely floating overlays (menus, modals, drawers). Tinted with primary-950 (6,27,49) so they read as native to the palette. Dark mode: no shadows - elevation via surface-lightening (see dark blocks). ========================================================================== */ --shadow-sm: 0 1px 2px rgba(6, 27, 49, 0.06); --shadow-md: 0 4px 12px rgba(6, 27, 49, 0.1); --shadow-lg: 0 12px 32px rgba(6, 27, 49, 0.14); --shadow-xl: 0 24px 48px rgba(6, 27, 49, 0.18); /* ========================================================================== 7. MOTION (design.md §3.5) ========================================================================== */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ========================================================================== 8. Z-INDEX (design.md §3.6) ========================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ========================================================================== 9. LAYOUT (design.md §3.2, §6) ========================================================================== */ --container-desktop: 1200px; --container-large: 1320px; --auth-card-width: 420px; /* ---- App-shell sidebar (design.md §6.1, "Vertex" collapsible sidebar) ---- Canonical spec: a 264px sidebar that COLLAPSES to 76px via the top toggle. Both are fixed widths (unlike the old intrinsic rail). The collapse transition animates between these two values. */ --sidebar-width: 264px; /* expanded */ --sidebar-width-collapsed: 76px; /* collapsed (icon-only) */ /* ---- Control heights (design.md §3.7 / §7 / §8) ---- 44px circular icon-buttons and 44px hit-area floor (§4.4); 48px lg search field (§8); 40px md controls (filters, default buttons). */ --control-icon-btn: 44px; /* circular icon-button + touch-target floor */ --control-search: 48px; /* pill search field (lg) */ /* ========================================================================== 10. ⚠️ LEGACY COMPATIBILITY SHIM - TEMPORARY, REMOVE IN PAGE-ROLLOUT TASK -------------------------------------------------------------------------- The "Vertex" revamp renamed the old brand primitives. This task rewrites ONLY tokens.css/design.md/components.md and deliberately does NOT re-skin existing pages (dashboard-shell.css, components.css, base.css, page CSS) - those are rebuilt in the later page-rollout task. Those still-shipping stylesheets reference the OLD names below, so removing them outright would leave all 23 pages rendering with missing custom properties (transparent / UA-default colors) in the interim. This block aliases each retired name to its nearest NEW semantic value, so existing pages keep rendering and are AUTO-RETINTED to the new palette (old near-black-teal + mint → new dark-navy + indigo) until the rollout migrates them class-by-class and deletes this block. Backend/frontend handoff: see components.md §19/§64 "shell divergence". ========================================================================== */ --color-accent: var(--primary-950); /* was #032125 near-black teal → dark-navy ink/surface */ --color-text-brand: var(--primary-950); /* was #00262B ink → primary-950 */ --color-icon: var(--accent-300); /* was #ABFFAE mint pop-on-dark → light-indigo pop */ --color-icon-hover: var(--accent-200); /* was #C4FFC6 lighter mint → lighter indigo */ /* Legacy SHELL layout tokens - still consumed by the pre-revamp rail+top-bar shell that the CANDIDATE dashboard uses (dashboard-shell.css, and the Candidates search bar's sticky offset in components.css). The employer "Vertex" app-shell has no top bar and uses --sidebar-width instead, so these are dead once candidate migrates - remove them WITH this whole shim then. */ --topbar-height: 44px; /* legacy fixed top-bar height */ --sidebar-rail-width: 76px; /* legacy icon-rail min-width floor */ } /* ============================================================================ DARK MODE via OS preference - only while the user hasn't chosen explicitly. The neutral #111111 seed becomes the canvas; #191919 carries surfaces and light indigo (accent-300) remains the pop color. Because the two requested surfaces are intentionally subtle, borders preserve component boundaries. Mirrors the manual-toggle block below exactly. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Surfaces (neutral charcoal pair) */ --bg-base: var(--dark-canvas); /* #111111 canvas */ --bg-surface: var(--dark-surface); /* #191919 cards and panels */ --bg-elevated: var(--dark-surface); /* #191919 overlays; borders carry elevation */ --sidebar-bg: var(--dark-surface); /* Tooltip inverts WITH the theme (components.md §93): a dark tooltip on a dark canvas would be the one thing that disappears. Light neutral + dark ink keeps the same "opposite of everything around it" reading. */ --tooltip-bg: var(--neutral-100); --tooltip-text: var(--neutral-900); /* Borders */ --border-default: var(--dark-border); --border-strong: var(--dark-border-strong); /* Text (white + neutral gray) */ --text-primary: var(--color-white); --text-secondary: var(--dark-text-secondary); --text-muted: var(--dark-text-muted); --text-disabled: var(--dark-text-disabled); --text-inverse: var(--primary-950); /* text on light/accent fills */ /* Icons */ --icon-default: var(--color-white); --icon-muted: var(--dark-text-muted); /* Default avatar illustration (components.md §78). Its dedicated neutral figure remains visible on the charcoal surface without competing with real candidate photos. */ --avatar-illustration-surface: var(--dark-surface); --avatar-illustration-figure: var(--dark-text-disabled); /* Accent - light indigo is the pop on the dark canvas */ --accent: var(--accent-300); /* filled primary FILL (#A0B1EA) */ --accent-hover: var(--accent-200); /* #C3CEF2 */ --accent-text-on: var(--primary-950); /* dark navy text ON accent-300 = ~7:1 */ --accent-text: var(--accent-300); /* accent text/links on canvas */ --accent-tint: var(--dark-surface); /* active-nav / tag fill */ --accent-tint-strong: var(--dark-border); --accent-ink: var(--accent-300); /* on dark tint */ --accent-tint-border: var(--dark-border-strong); --focus-ring: var(--accent-300); /* high-contrast ring on dark */ --hover-surface: var(--dark-surface); /* Semantic foregrounds brighten for the dark canvas (bg tints NOT flipped; banners/badges swap to a neutral surface - design.md §1.4). */ --color-success: #4ade80; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #22d3ee; } } /* ============================================================================ DARK MODE via explicit manual toggle (theme.js sets [data-theme="dark"]) - wins regardless of OS. Kept byte-for-byte in sync with the block above. ============================================================================ */ :root[data-theme="dark"] { --bg-base: var(--dark-canvas); --bg-surface: var(--dark-surface); --bg-elevated: var(--dark-surface); --sidebar-bg: var(--dark-surface); /* See the note in the prefers-color-scheme block above. */ --tooltip-bg: var(--neutral-100); --tooltip-text: var(--neutral-900); --border-default: var(--dark-border); --border-strong: var(--dark-border-strong); --text-primary: var(--color-white); --text-secondary: var(--dark-text-secondary); --text-muted: var(--dark-text-muted); --text-disabled: var(--dark-text-disabled); --text-inverse: var(--primary-950); --icon-default: var(--color-white); --icon-muted: var(--dark-text-muted); /* Default avatar illustration (components.md §78) - see the @media block. */ --avatar-illustration-surface: var(--dark-surface); --avatar-illustration-figure: var(--dark-text-disabled); --accent: var(--accent-300); --accent-hover: var(--accent-200); --accent-text-on: var(--primary-950); --accent-text: var(--accent-300); --accent-tint: var(--dark-surface); --accent-tint-strong: var(--dark-border); --accent-ink: var(--accent-300); --accent-tint-border: var(--dark-border-strong); --focus-ring: var(--accent-300); --hover-surface: var(--dark-surface); --color-success: #4ade80; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #22d3ee; } /* Backend developer note (design.md §1.5): color tokens are front-end/CSS-only. No API/data dependency. Theme preference (light/dark/system) should persist per-user - see design.md §16.3 for the storage requirement. */