:root { /* Brand palette — Xpedited Health Brand Guide 2025 (hex sampled from official logo files) */ --brand-navy: #364c84; /* Main */ --brand-sky: #5cb1e6; /* Main accent */ --brand-blue: #1e84c3; /* Small accent */ --brand-aqua: #bbeaf2; /* Background / base */ --brand-white: #ffffff; /* Semantic roles */ /* Sunny "Boynton sand" neutrals — bright, warm, and cozy next to the brand blues */ --color-surface: #fcf8f1; --color-surface-alt: #fffdf8; --color-sand: #f8efe0; --color-sunlight: #fff1e0; --color-glow-warm: rgb(255 188 120 / 0.42); /* golden-hour peach */ --color-glow-cool: rgb(187 234 242 / 0.4); --shadow-rgb: 140 100 55; /* warm, sun-cast shadows */ --color-ink: var(--brand-navy); --color-ink-soft: rgb(54 76 132 / 0.74); --color-ink-faint: rgb(54 76 132 / 0.5); --color-line: rgb(54 76 132 / 0.14); --color-accent: var(--brand-blue); /* large text, buttons, icons */ --color-accent-text: #176ea6; /* small text links — AA on white */ --color-highlight: var(--brand-sky); /* decorative only */ --color-aqua: var(--brand-aqua); --color-aqua-soft: #e3f5f9; --color-abyss: #22335e; --color-error: #c0392b; /* Surfaces & controls that flip with the theme */ --color-header: rgb(252 248 241 / 0.74); --color-card: rgb(255 253 248 / 0.85); --color-glass: rgb(255 255 255 / 0.55); --color-rim: rgb(255 255 255 / 0.85); --color-button: var(--brand-navy); --color-button-hover: var(--brand-blue); --color-cta-a: var(--brand-white); --color-cta-b: var(--color-sunlight); --color-cta-c: #ffd3a1; --grain-opacity: 0.05; --photo-filter: saturate(1.06) sepia(0.08) brightness(1.03); --grain-blend: multiply; color-scheme: light; /* Type — Outfit stands in for Made Tommy, Barlow Condensed for DIN Condensed Bold */ --font-sans: "Outfit", system-ui, -apple-system, sans-serif; --font-condensed: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif; --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem); --text-xl: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); --text-stat: clamp(2.75rem, 1.5rem + 4vw, 4.75rem); --text-hero: clamp(2.6rem, 1rem + 5.6vw, 6.5rem); --tracking-label: 0.14em; /* Space */ --space-section: clamp(5.5rem, 4rem + 7vw, 11rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem); --radius-sm: 6px; --radius-md: 20px; --radius-lg: 24px; /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 180ms; --duration-normal: 420ms; --duration-slow: 1100ms; } /* Night — moonlit navy. Set on by js/theme.js. */ :root[data-theme="dark"] { --color-surface: #0e1830; --color-surface-alt: #15223f; --color-sand: #1b2a4b; --color-glow-warm: rgb(92 177 230 / 0.10); --color-glow-cool: rgb(187 234 242 / 0.07); --color-ink: #e9eef7; --color-ink-soft: rgb(233 238 247 / 0.72); --color-ink-faint: rgb(233 238 247 / 0.5); --color-line: rgb(233 238 247 / 0.14); --color-accent: var(--brand-sky); --color-accent-text: #8ccbf0; --color-aqua: rgb(92 177 230 / 0.35); --color-aqua-soft: #1b2a4b; --color-abyss: #081022; --color-sunlight: #15223f; --color-header: rgb(14 24 48 / 0.72); --color-card: rgb(21 34 63 / 0.82); --color-glass: rgb(21 34 63 / 0.55); --color-rim: rgb(233 238 247 / 0.1); --color-button: #1a73ab; --color-button-hover: var(--brand-blue); --color-cta-a: #20386a; --color-cta-b: #1b2c52; --color-cta-c: #15223f; --grain-opacity: 0.05; --grain-blend: screen; --shadow-rgb: 0 0 0; --photo-filter: brightness(0.92); color-scheme: dark; }