/* ========================================================================== PROS — Precision Remote Outsource Solution Design tokens. Colors sampled directly from supplied brand assets. ========================================================================== */ :root { /* --- Brand palette (sampled from hero-global-legal.png, icon set) ------- */ --brand-navy-900: #0F1B2E; /* deepest — footer, overlays */ --brand-navy-800: #182740; /* core brand navy — icon bg, step dots */ --brand-navy-700: #21375B; /* lighter navy — hero gradient */ --brand-navy-600: #2E4A75; /* hover state on navy surfaces */ --brand-bronze-700:#8F681D; /* gold hue, darkened for TEXT on light 4.77:1 on cream · 5.04:1 on white — AA */ --brand-gold-600: #C8912B; /* decorative only — 2.6:1, never for text */ --brand-gold-500: #F2BB4E; /* core brand gold — accents, CTA fills */ --brand-gold-400: #F6C96A; /* highlight gold */ --brand-gold-300: #FAD684; /* soft gold — gradients */ --brand-cream-100: #FFF8EC; /* section background */ --brand-cream-200: #FEF4E4; /* alternate band */ --brand-cream-300: #EDCF9A; /* cream border / divider */ --neutral-0: #FFFFFF; --neutral-100: #F4F6F9; --neutral-300: #CBD5E1; --neutral-500: #46586B; /* sampled body-text grey from process art */ --neutral-700: #2B3A4D; /* --- Semantic tokens (light) ------------------------------------------- Components reference ONLY these, never raw brand values above. */ --color-background: var(--neutral-0); --color-surface: var(--neutral-0); --color-surface-alt: var(--brand-cream-100); --color-surface-invert:var(--brand-navy-800); --color-foreground: var(--brand-navy-900); /* 15.8:1 on white AAA */ --color-foreground-mut:var(--neutral-500); /* 7.4:1 on white AAA */ --color-on-invert: var(--neutral-0); /* 14.3:1 on navy AAA */ --color-on-invert-mut: #C3CEDD; /* 8.1:1 on navy AAA */ --color-primary: var(--brand-navy-800); --color-on-primary: var(--neutral-0); --color-primary-hover: var(--brand-navy-600); --color-accent: var(--brand-gold-500); --color-on-accent: var(--brand-navy-900); /* 9.6:1 — never white */ --color-accent-hover: var(--brand-gold-400); --color-accent-text: var(--brand-bronze-700); /* gold TEXT on light — AA */ --color-border: #E2E8F0; --color-border-strong: var(--neutral-300); --color-border-invert: rgba(255, 255, 255, .16); --color-ring: var(--brand-gold-500); --color-destructive: #C0392B; --color-success: #1E7A46; /* --- Type scale — serif display + sans body ---------------------------- */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-xs: 0.8125rem; /* 13px — eyebrow, legal */ --text-sm: 0.9375rem; /* 15px — captions */ --text-base: 1rem; /* 16px — body (never below) */ --text-lg: 1.125rem; /* 18px — lead paragraph */ --text-xl: 1.375rem; /* 22px — card titles */ --text-2xl: 1.75rem; /* 28px — section sub */ --text-3xl: 2.25rem; /* 36px — section heading */ --text-4xl: 3rem; /* 48px — hero (mobile) */ --text-5xl: 4rem; /* 64px — hero (desktop) */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.65; /* within 1.5–1.75 guidance */ --tracking-eyebrow: 0.14em; --measure: 68ch; /* 60–75 char line length */ /* --- Spacing — 4/8px rhythm ------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --section-y: clamp(4rem, 9vw, 7.5rem); --gutter: clamp(1.25rem, 5vw, 3rem); --container: 76rem; /* --- Radius, elevation, motion ---------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 27, 46, .06), 0 1px 3px rgba(15, 27, 46, .08); --shadow-md: 0 4px 10px rgba(15, 27, 46, .07), 0 2px 4px rgba(15, 27, 46, .06); --shadow-lg: 0 12px 28px rgba(15, 27, 46, .10), 0 4px 10px rgba(15, 27, 46, .06); --shadow-gold: 0 6px 18px rgba(242, 187, 78, .32); --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in: cubic-bezier(.55, .06, .68, .19); --dur-fast: 150ms; --dur-base: 220ms; /* micro-interactions: 150–300ms */ --dur-slow: 380ms; /* --- Layering --------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-modal: 1000; } /* --- Dark mode: desaturated tonal shift, not an inversion ---------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-background: var(--brand-navy-900); --color-surface: #16243B; --color-surface-alt: #1B2C48; --color-surface-invert: #0B1524; --color-foreground: #F1F5FA; /* 15.1:1 on navy-900 */ --color-foreground-mut: #B6C2D4; /* 8.6:1 — secondary */ --color-on-invert: #F1F5FA; --color-on-invert-mut: #B6C2D4; --color-primary: var(--brand-gold-500); --color-on-primary: var(--brand-navy-900); --color-primary-hover: var(--brand-gold-400); --color-accent: var(--brand-gold-500); --color-on-accent: var(--brand-navy-900); --color-accent-text: var(--brand-gold-400); /* lighter for dark bg */ --color-border: rgba(255, 255, 255, .12); --color-border-strong: rgba(255, 255, 255, .22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 14px 32px rgba(0, 0, 0, .5); } } /* Explicit theme override — must win in both directions */ :root[data-theme="dark"] { --color-background: var(--brand-navy-900); --color-surface: #16243B; --color-surface-alt: #1B2C48; --color-surface-invert: #0B1524; --color-foreground: #F1F5FA; --color-foreground-mut: #B6C2D4; --color-on-invert: #F1F5FA; --color-on-invert-mut: #B6C2D4; --color-primary: var(--brand-gold-500); --color-on-primary: var(--brand-navy-900); --color-primary-hover: var(--brand-gold-400); --color-accent-text: var(--brand-gold-400); --color-border: rgba(255, 255, 255, .12); --color-border-strong: rgba(255, 255, 255, .22); } /* --- Motion preference --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }