/* ───────────────────────────────────────────────────────────── Purely Works — Design Tokens Single source of truth for color, type, space, motion. Two themes: light (default) + dark (toggled via [data-theme="dark"] on ). ───────────────────────────────────────────────────────────── */ :root { /* ── Brand primaries ── */ --pw-chambray: #455E7F; --pw-chambray-dark: #334A66; --pw-chambray-deep: #2D4260; --pw-chambray-ink: #1A2A3E; --pw-chambray-tint: #E8EDF3; --pw-gold: #D7A839; --pw-gold-dark: #C49530; --pw-gold-deep: #A87A1F; --pw-gold-tint: #FBF3DE; /* ── Service accents ── */ --pw-proposals: #0695C2; --pw-proposals-tint: #E6F5FA; --pw-development: #A980D5; --pw-development-tint:#F5F0FA; --pw-recruiting: #3CB3A2; --pw-recruiting-tint: #EBF8F6; --pw-consulting: #DC9645; --pw-consulting-tint: #FBF3E8; --pw-flex: #C66860; --pw-flex-tint: #F9EDED; --pw-fintech: #2E7D5B; --pw-fintech-tint: #E8F4EE; /* ── Neutrals (mode-agnostic) ── */ --pw-white: #FFFFFF; --pw-black: #0A1018; /* ── Semantic surface (LIGHT mode defaults) ── */ --pw-bg: #FAFBFD; --pw-bg-alt: #F2F5F9; --pw-surface: #FFFFFF; --pw-surface-alt: #F5F7FA; --pw-elev: #FFFFFF; --pw-line: #E5EAF1; --pw-line-strong: #CED5DF; --pw-text: #1A2A3E; --pw-text-muted: #5B6A7E; --pw-text-subtle: #8090A4; --pw-text-inverse: #FFFFFF; --pw-heading: #1A2A3E; --pw-accent: #455E7F; --pw-accent-2: #D7A839; /* ── Hero/inverted always-dark surface ── */ --pw-hero-bg: #0F1A2A; --pw-hero-bg-2: #1A2A3E; --pw-hero-bg-3: #2D4260; /* ── Typography ── */ --pw-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --pw-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --pw-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --pw-fs-eyebrow: 11px; --pw-fs-small: 13px; --pw-fs-body: 16px; --pw-fs-body-lg: 18px; --pw-fs-h4: 20px; --pw-fs-h3: 24px; --pw-fs-h2: clamp(28px, 3.5vw, 42px); --pw-fs-h1: clamp(36px, 5.5vw, 64px); --pw-fs-display: clamp(48px, 8vw, 96px); --pw-lh-tight: 1.1; --pw-lh-snug: 1.25; --pw-lh-body: 1.6; --pw-lh-loose: 1.75; /* ── Spacing scale (4px grid) ── */ --pw-sp-1: 4px; --pw-sp-2: 8px; --pw-sp-3: 12px; --pw-sp-4: 16px; --pw-sp-5: 24px; --pw-sp-6: 32px; --pw-sp-7: 48px; --pw-sp-8: 64px; --pw-sp-9: 96px; --pw-sp-10: 128px; /* ── Layout ── */ --pw-page-max: 1200px; --pw-page-pad: clamp(20px, 4vw, 48px); --pw-nav-h: 130px; /* ── Radius ── */ --pw-r-xs: 4px; --pw-r-sm: 6px; --pw-r-md: 10px; --pw-r-lg: 14px; --pw-r-xl: 20px; --pw-r-2xl: 28px; --pw-r-pill: 999px; /* ── Shadow ── */ --pw-shadow-xs: 0 1px 2px rgba(26, 42, 62, 0.04); --pw-shadow-sm: 0 2px 8px rgba(26, 42, 62, 0.06); --pw-shadow-md: 0 6px 20px rgba(26, 42, 62, 0.08); --pw-shadow-lg: 0 16px 40px rgba(26, 42, 62, 0.12); --pw-shadow-xl: 0 24px 60px rgba(26, 42, 62, 0.18); --pw-shadow-gold: 0 8px 24px rgba(215, 168, 57, 0.25); /* ── Motion ── */ --pw-dur-fast: 160ms; --pw-dur: 280ms; --pw-dur-slow: 520ms; --pw-dur-very-slow: 900ms; --pw-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --pw-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --pw-ease-in: cubic-bezier(0.5, 0, 0.75, 0); --pw-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ── Z-index ── */ --pw-z-nav: 200; --pw-z-drop: 250; --pw-z-overlay: 400; --pw-z-modal: 500; --pw-z-splash: 900; color-scheme: light; } /* ─── Dark theme override ─── */ :root[data-theme="dark"] { --pw-bg: #0B1422; --pw-bg-alt: #0F1A2A; --pw-surface: #16243A; --pw-surface-alt: #1A2A3E; --pw-elev: #1F3050; --pw-line: rgba(255,255,255,0.08); --pw-line-strong: rgba(255,255,255,0.16); --pw-text: #E6ECF3; --pw-text-muted: #9BA8BC; --pw-text-subtle: #6B7A92; --pw-text-inverse: #1A2A3E; --pw-heading: #FFFFFF; --pw-accent: #7A93B6; --pw-accent-2: #E5B952; --pw-shadow-xs: 0 1px 2px rgba(0,0,0,0.20); --pw-shadow-sm: 0 2px 8px rgba(0,0,0,0.30); --pw-shadow-md: 0 6px 20px rgba(0,0,0,0.35); --pw-shadow-lg: 0 16px 40px rgba(0,0,0,0.45); --pw-shadow-xl: 0 24px 60px rgba(0,0,0,0.50); color-scheme: dark; } /* ─── Reset ─── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--pw-font-body); font-size: var(--pw-fs-body); line-height: var(--pw-lh-body); color: var(--pw-text); background: var(--pw-bg); overflow-x: hidden; transition: background-color var(--pw-dur) var(--pw-ease), color var(--pw-dur) var(--pw-ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--pw-font-heading); color: var(--pw-heading); line-height: var(--pw-lh-snug); letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--pw-gold); color: var(--pw-chambray-ink); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }