/* ============================================================ RxStore — Design Tokens Single source of truth. Nothing below this file should introduce a raw hex, a raw px spacing value, or a one-off easing curve. If you need a new value, add it here first. ============================================================ */ :root { /* --- Neutral ramp ------------------------------------------------- Cool-tinted, not pure grey. Every neutral carries a trace of the brand blue so the page reads as one temperature. */ --n-0: #ffffff; --n-25: #fcfcfd; --n-50: #f7f8fa; --n-100: #eef0f4; --n-200: #e1e4eb; --n-300: #c9cfda; --n-400: #9aa4b6; --n-500: #6b7688; --n-600: #4c5768; --n-700: #333d4d; --n-800: #1c2533; --n-900: #0a1628; /* --- Accent ramp: brand navy --------------------------------------- Built around #0a2a54, sampled from the Rx mark. Carries weight — buttons, filled badges, gradients, shadows. */ --a-50: #eff3f9; --a-100: #dae3f0; --a-200: #b5c8e2; --a-300: #86a4c9; --a-400: #4a71a4; --a-500: #0a2a54; /* the accent */ --a-600: #082243; --a-700: #061b36; --a-800: #041226; /* --- Detail ramp: brand teal ---------------------------------------- The mark's second colour. Carries attention — eyebrows, icon tints, link hovers, ticks. It exists because the navy above sits at 1.27:1 against body text: as a small mark it would be indistinguishable from ordinary copy. Teal clears that at 4.6:1. */ --e-50: #e6f5f5; --e-100: #c6eaea; --e-200: #93d6d6; --e-300: #4fb8b8; --e-400: #16a0a0; --e-500: #0e8f8f; /* the detail accent */ --e-600: #0b7676; --e-700: #095c5c; /* --- Support: used only for status, never for decoration ---------- */ --ok-50: #edfaf2; --ok-500: #16a34a; --warn-500: #d97706; /* Form validation only. Never decorative — a red on this page means something the visitor has to fix before the form will submit. */ --bad-50: #fef2f2; --bad-500: #d92d20; --bad-600: #b42318; /* --- Semantic surfaces -------------------------------------------- */ --bg: var(--n-25); --bg-sunken: var(--n-50); --surface: var(--n-0); --surface-alt: var(--n-50); --surface-invert: var(--n-900); --text: var(--n-900); --text-muted: var(--n-600); --text-subtle: var(--n-500); --text-invert: var(--n-25); --text-on-accent: var(--n-0); --border: var(--n-200); --border-strong: var(--n-300); --border-subtle: var(--n-100); /* Two accents doing two jobs. --accent fills things; --detail marks them. Anything small enough to read as a symbol takes --detail. */ --accent: var(--a-500); --accent-soft: var(--a-50); /* e-600 rather than e-500: almost everything wearing --detail is small text (12px eyebrows, 13px step numbers, 15px link hovers), which needs 4.5:1. e-500 measured 3.70:1 on the sunken background — one step down clears it everywhere with room to spare. */ --detail: var(--e-600); --detail-hover: var(--e-700); --detail-soft: var(--e-50); --detail-on-dark: var(--e-200); /* --- Type ---------------------------------------------------------- Two families doing distinct jobs, plus a serif reserved exclusively for a single emphasised word in the hero. Restraint is the point. */ --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; /* Fluid modular scale, ~1.25 ratio, clamped between 375px and 1440px. Every heading on the site pulls from these seven steps. No others. */ --t-xs: 0.75rem; /* 12 — eyebrows, legal */ --t-sm: 0.8125rem; /* 13 — meta, captions */ --t-base: 0.9375rem; /* 15 — UI text */ --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16–17 — prose */ --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17–20 — subheads */ --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --t-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem); --t-h2: clamp(1.875rem, 1.55rem + 1.45vw, 3rem); --t-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem); --lh-tight: 1.05; --lh-snug: 1.18; --lh-heading: 1.28; --lh-body: 1.62; --lh-loose: 1.72; /* Optical tracking — large type needs negative, small caps need positive */ --tr-display: -0.035em; --tr-heading: -0.021em; --tr-body: -0.006em; --tr-eyebrow: 0.085em; /* --- Spacing: 4px base, only these steps exist -------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Vertical rhythm between full-bleed sections */ --section-y: clamp(4.5rem, 3rem + 6.5vw, 8.5rem); --section-y-tight: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* --- Layout -------------------------------------------------------- */ --container: 76rem; /* 1216px — main content width */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* --- Radii ---------------------------------------------------------- */ --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 0.875rem; --r-xl: 1.25rem; --r-2xl: 1.75rem; --r-pill: 999px; /* --- Elevation ------------------------------------------------------ Blue-tinted shadows. Pure-black shadows on a cool background are the single most common tell of an unconsidered design. */ --sh-xs: 0 1px 2px color-mix(in oklab, var(--n-900) 5%, transparent); --sh-sm: 0 1px 2px color-mix(in oklab, var(--n-900) 4%, transparent), 0 2px 6px color-mix(in oklab, var(--n-900) 4%, transparent); --sh-md: 0 2px 4px color-mix(in oklab, var(--n-900) 3%, transparent), 0 8px 20px color-mix(in oklab, var(--n-900) 6%, transparent); --sh-lg: 0 4px 8px color-mix(in oklab, var(--n-900) 3%, transparent), 0 16px 40px color-mix(in oklab, var(--n-900) 8%, transparent); /* --- Motion --------------------------------------------------------- One curve, used everywhere. Durations vary; the character does not. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 140ms; --d-base: 240ms; --d-slow: 420ms; --d-reveal: 780ms; /* --- Chrome ---------------------------------------------------------- */ --nav-h: 5.5rem; --bar-h: 2.375rem; --z-nav: 60; --z-bar: 61; --z-menu: 70; }