/* ============================================================================
HRX Design System v2 — Material Design 3 tokens
Light-first · Deep Indigo accent · Warm neutrals (Stone scale)
Inspired by: Toptal layout, Linear/Stripe/Vercel typography & color treatment
========================================================================= */
/* ---------- Required imports ----------
*/
/* ============================================================================
COLOR TOKENS — Light theme (DEFAULT)
Premium off-white background, indigo CTAs, warm stone neutrals.
========================================================================= */
:root,
[data-theme="light"] {
/* PRIMARY — Deep Indigo (serious, premium, not flashy) */
--md-sys-color-primary: #312E81;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-primary-container: #E0E7FF;
--md-sys-color-on-primary-container: #1E1B4B;
/* SECONDARY — warm slate */
--md-sys-color-secondary: #44403C;
--md-sys-color-on-secondary: #FFFFFF;
--md-sys-color-secondary-container: #E7E5E4;
--md-sys-color-on-secondary-container: #292524;
/* TERTIARY — graphite for dark accent sections */
--md-sys-color-tertiary: #1A1F2C;
--md-sys-color-on-tertiary: #FAFAF7;
--md-sys-color-tertiary-container: #2A3142;
--md-sys-color-on-tertiary-container: #E5E7EB;
/* SURFACES — warm off-white stack */
--md-sys-color-background: #FAFAF7;
--md-sys-color-on-background: #111111;
--md-sys-color-surface: #FAFAF7;
--md-sys-color-on-surface: #111111;
--md-sys-color-surface-dim: #F0EFEB;
--md-sys-color-surface-bright: #FFFFFF;
--md-sys-color-surface-container-lowest: #FFFFFF;
--md-sys-color-surface-container-low: #F5F5F2;
--md-sys-color-surface-container: #EEEDE8;
--md-sys-color-surface-container-high: #E7E5E4;
--md-sys-color-surface-container-highest: #D6D3D1;
--md-sys-color-on-surface-variant: #333333;
--md-sys-color-outline: #A8A29E;
--md-sys-color-outline-variant: #E7E5E4;
--md-sys-color-error: #B91C1C;
--md-sys-color-on-error: #FFFFFF;
--md-sys-color-error-container: #FEE2E2;
--md-sys-color-on-error-container: #7F1D1D;
--md-sys-color-scrim: #000000;
--md-sys-color-shadow: #111111;
--md-sys-color-inverse-surface: #1A1F2C;
--md-sys-color-inverse-on-surface: #FAFAF7;
--md-sys-color-inverse-primary: #A5B4FC;
/* ALERT — controlled signal accent, NOT a second primary */
--md-sys-color-alert: #C2410C;
--md-sys-color-on-alert: #FFFFFF;
--md-sys-color-alert-container: #FED7AA;
--md-sys-color-on-alert-container: #7C2D12;
}
/* ============================================================================
COLOR TOKENS — Dark theme / dark accent sections
========================================================================= */
[data-theme="dark"],
.surface-dark {
--md-sys-color-primary: #818CF8;
--md-sys-color-on-primary: #1E1B4B;
--md-sys-color-primary-container: #3730A3;
--md-sys-color-on-primary-container: #C7D2FE;
--md-sys-color-secondary: #D6D3D1;
--md-sys-color-on-secondary: #111111;
--md-sys-color-secondary-container: #292524;
--md-sys-color-on-secondary-container: #E7E5E4;
--md-sys-color-tertiary: #C7D2FE;
--md-sys-color-on-tertiary: #1E1B4B;
--md-sys-color-tertiary-container: #312E81;
--md-sys-color-on-tertiary-container: #E0E7FF;
--md-sys-color-background: #1A1F2C;
--md-sys-color-on-background: #FAFAF7;
--md-sys-color-surface: #1A1F2C;
--md-sys-color-on-surface: #FAFAF7;
--md-sys-color-surface-dim: #14171F;
--md-sys-color-surface-bright: #2A3142;
--md-sys-color-surface-container-lowest: #0F1219;
--md-sys-color-surface-container-low: #1F2532;
--md-sys-color-surface-container: #262D3D;
--md-sys-color-surface-container-high: #2F3749;
--md-sys-color-surface-container-highest: #3A4255;
--md-sys-color-on-surface-variant: #D6D3D1;
--md-sys-color-outline: #555555;
--md-sys-color-outline-variant: #3A4255;
--md-sys-color-error: #FCA5A5;
--md-sys-color-on-error: #7F1D1D;
--md-sys-color-error-container: #991B1B;
--md-sys-color-on-error-container: #FEE2E2;
--md-sys-color-inverse-surface: #FAFAF7;
--md-sys-color-inverse-on-surface: #1A1F2C;
--md-sys-color-inverse-primary: #312E81;
/* ALERT — controlled signal accent for dark sections */
--md-sys-color-alert: #FB923C;
--md-sys-color-on-alert: #431407;
--md-sys-color-alert-container: #7C2D12;
--md-sys-color-on-alert-container: #FED7AA;
}
/* ============================================================================
TYPOGRAPHY TOKENS
========================================================================= */
:root {
--md-ref-typeface-brand: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--md-ref-typeface-plain: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--md-ref-typeface-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
--md-sys-typescale-display-large-size: 64px;
--md-sys-typescale-display-large-weight: 700;
--md-sys-typescale-display-large-line-height: 72px;
--md-sys-typescale-display-large-tracking: -0.025em;
--md-sys-typescale-display-medium-size: 48px;
--md-sys-typescale-display-medium-weight: 700;
--md-sys-typescale-display-medium-line-height: 56px;
--md-sys-typescale-display-medium-tracking: -0.022em;
--md-sys-typescale-display-small-size: 36px;
--md-sys-typescale-display-small-weight: 600;
--md-sys-typescale-display-small-line-height: 44px;
--md-sys-typescale-display-small-tracking: -0.02em;
--md-sys-typescale-headline-large-size: 32px;
--md-sys-typescale-headline-large-weight: 600;
--md-sys-typescale-headline-large-line-height: 40px;
--md-sys-typescale-headline-large-tracking: -0.018em;
--md-sys-typescale-headline-medium-size: 28px;
--md-sys-typescale-headline-medium-weight: 600;
--md-sys-typescale-headline-medium-line-height: 36px;
--md-sys-typescale-headline-medium-tracking: -0.015em;
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-small-weight: 600;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-title-large-size: 20px;
--md-sys-typescale-title-large-weight: 600;
--md-sys-typescale-title-large-line-height: 28px;
--md-sys-typescale-title-medium-size: 16px;
--md-sys-typescale-title-medium-weight: 600;
--md-sys-typescale-title-medium-line-height: 24px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-large-line-height: 26px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-medium-line-height: 22px;
--md-sys-typescale-label-large-size: 14px;
--md-sys-typescale-label-large-weight: 500;
--md-sys-typescale-label-large-line-height: 20px;
}
/* ============================================================================
SHAPE / ELEVATION / MOTION
========================================================================= */
:root {
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-full: 9999px;
--md-sys-elevation-1: 0px 1px 2px rgba(28, 25, 23, 0.04), 0px 1px 3px rgba(28, 25, 23, 0.06);
--md-sys-elevation-2: 0px 2px 4px rgba(28, 25, 23, 0.04), 0px 4px 8px rgba(28, 25, 23, 0.06);
--md-sys-elevation-3: 0px 4px 8px rgba(28, 25, 23, 0.05), 0px 8px 16px rgba(28, 25, 23, 0.08);
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-duration-short: 150ms;
--md-sys-motion-duration-medium: 250ms;
--md-sys-motion-duration-long: 400ms;
}
/* Spacing — 4px base */
:root {
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
}
/* ============================================================================
HRX product design contract
Tokens below normalize the static landing, candidate login, candidate portal,
modals, drawers and reusable form controls around one premium SaaS system.
========================================================================= */
:root {
/* Color aliases */
--hrx-primary: #312E81;
--hrx-primary-hover: #3730A3;
--hrx-primary-pressed: #1E1B4B;
--hrx-primary-soft: #EEF0FF;
--hrx-primary-border: rgba(49, 46, 129, 0.18);
--hrx-page: #FAFAF7;
--hrx-page-alt: #F6F6F4;
--hrx-surface: #FFFFFF;
--hrx-surface-soft: #F8F7F5;
--hrx-text: #0E0E10;
--hrx-text-2: #2A2A2E;
--hrx-muted: #6B6B72;
--hrx-muted-2: #9A9AA1;
--hrx-border: #ECECE8;
--hrx-border-strong: #E2E2DD;
--hrx-success: #16A34A;
--hrx-success-soft: #DCFCE7;
--hrx-warning: #D97706;
--hrx-warning-soft: #FEF3C7;
--hrx-danger: #DC2626;
--hrx-danger-soft: #FEE2E2;
--hrx-whatsapp: #22C55E;
/* Compatibility aliases used by existing prototype files */
--bg: var(--hrx-page-alt);
--surface: var(--hrx-surface);
--card: var(--hrx-surface);
--ink: var(--hrx-text);
--ink-2: var(--hrx-text-2);
--muted: var(--hrx-muted);
--muted-2: var(--hrx-muted-2);
--line: var(--hrx-border);
--line-2: var(--hrx-border-strong);
--chip-bg: #F2F2EE;
--chip-ink: #3A3A3F;
--accent: var(--hrx-primary);
--accent-rgb: 49, 46, 129;
--accent-soft: var(--hrx-primary-soft);
--accent-mid: #818CF8;
--success: var(--hrx-success);
--success-soft: var(--hrx-success-soft);
--warn: var(--hrx-warning);
--warn-soft: var(--hrx-warning-soft);
--danger: var(--hrx-danger);
--danger-soft: var(--hrx-danger-soft);
/* Component sizes */
--hrx-control-height: 40px;
--hrx-control-height-lg: 46px;
--hrx-control-radius: 10px;
--hrx-card-radius: 16px;
--hrx-card-radius-lg: 20px;
--hrx-marketing-radius: 24px;
--hrx-pill-radius: 999px;
--hrx-form-gap: 12px;
--hrx-card-pad: 20px;
--hrx-modal-pad: 24px;
/* Elevation */
--hrx-shadow-card: 0 1px 0 rgba(14,14,16,.04), 0 6px 24px -16px rgba(14,14,16,.14);
--hrx-shadow-card-hover: 0 2px 8px rgba(14,14,16,.06), 0 12px 32px -18px rgba(14,14,16,.18);
--hrx-shadow-modal: 0 32px 90px rgba(14,14,16,.24), 0 4px 16px rgba(14,14,16,.08);
--hrx-shadow-drawer: -20px 0 60px -24px rgba(14,14,16,.26), -2px 0 10px rgba(14,14,16,.04);
--shadow-1: var(--hrx-shadow-card);
--shadow-2: var(--hrx-shadow-card-hover);
--shadow-3: var(--hrx-shadow-modal);
/* States */
--hrx-focus-ring: 0 0 0 3px rgba(49,46,129,.12);
--hrx-error-ring: 0 0 0 3px rgba(220,38,38,.10);
--hrx-success-ring: 0 0 0 3px rgba(22,163,74,.12);
--hrx-overlay: rgba(14,14,24,.46);
--hrx-overlay-strong: rgba(10,10,20,.52);
--hrx-motion: cubic-bezier(0.2, 0, 0, 1);
}
/* ============================================================================
BASE STYLES
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
font-family: var(--md-ref-typeface-plain);
background: var(--md-sys-color-background);
color: var(--md-sys-color-on-background);
font-size: var(--md-sys-typescale-body-large-size);
line-height: var(--md-sys-typescale-body-large-line-height);
}
img, svg, video { max-width: 100%; display: block; }
a {
color: var(--md-sys-color-primary);
text-decoration: none;
transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
a:hover { opacity: 0.75; }
::selection {
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
@media (min-width: 768px) {
.container { padding: 0 var(--space-10); }
}
section { padding: var(--space-16) 0; }
@media (min-width: 768px) { section { padding: var(--space-24) 0; } }
/* Dark accent section helper — applies dark tokens to a single section */
.section-dark {
background: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
}
.section-dark a { color: var(--md-sys-color-inverse-primary); }
.eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--md-sys-color-primary);
margin-bottom: var(--space-4);
}
.display-large { font-size: var(--md-sys-typescale-display-large-size); font-weight: 700; line-height: var(--md-sys-typescale-display-large-line-height); letter-spacing: var(--md-sys-typescale-display-large-tracking); margin: 0; }
.display-medium { font-size: var(--md-sys-typescale-display-medium-size); font-weight: 700; line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); margin: 0; }
.headline-large { font-size: var(--md-sys-typescale-headline-large-size); font-weight: 600; line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); margin: 0; }
.headline-medium { font-size: var(--md-sys-typescale-headline-medium-size); font-weight: 600; line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); margin: 0; }
.title-large { font-size: var(--md-sys-typescale-title-large-size); font-weight: 600; line-height: var(--md-sys-typescale-title-large-line-height); margin: 0; }
.body-large { font-size: var(--md-sys-typescale-body-large-size); font-weight: 400; line-height: var(--md-sys-typescale-body-large-line-height); }
.body-muted { color: var(--md-sys-color-on-surface-variant); }
/* Alert helpers — use rarely, max 1–2 elements per landing */
.text-alert {
color: var(--md-sys-color-alert);
}
.badge-alert {
display: inline-flex;
align-items: center;
gap: var(--space-2);
width: fit-content;
background: var(--md-sys-color-alert-container);
color: var(--md-sys-color-on-alert-container);
border-radius: var(--md-sys-shape-corner-full);
padding: var(--space-1) var(--space-3);
font-size: 12px;
line-height: 18px;
font-weight: 500;
}
.card {
background: var(--md-sys-color-surface-container-lowest);
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-large);
padding: var(--space-8);
transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.card:hover { border-color: var(--md-sys-color-outline); }
.card.featured { border: 2px solid var(--md-sys-color-primary); }
.tnum { font-variant-numeric: tabular-nums; }