/* ==========================================================================
Gambit design tokens
Extracted from https://www.getgambit.ca on 2026-11-08 (Playwright, 1440 + 390).
Source of every value: see README.md, "Where each token came from".
Load the fonts first (same families as the live site):
========================================================================== */
/* Metric-matched fallbacks, copied from the site's own @font-face rules so the
page does not shift when the web fonts arrive. */
@font-face {
font-family: "General Sans Fallback";
src: local("Arial");
ascent-override: 96.95%;
descent-override: 23.04%;
line-gap-override: 9.6%;
size-adjust: 104.17%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
ascent-override: 90.44%;
descent-override: 22.52%;
line-gap-override: 0%;
size-adjust: 107.12%;
}
@font-face {
font-family: "JetBrains Mono Fallback";
src: local("Arial");
ascent-override: 75.79%;
descent-override: 22.29%;
line-gap-override: 0%;
size-adjust: 134.59%;
}
:root {
/* ------------------------------------------------------------------
1. Brand primitives: exact hex values from the site's :root
------------------------------------------------------------------ */
--gg-deep-charcoal: #1a1a1e;
--gg-surface-elevated: #232328;
--gg-footer: #131316;
--gg-warm-white: #f7f5f2;
--gg-off-white: #ededeb;
--gg-white: #ffffff;
--gg-signal-red: #c43d2f;
--gg-signal-red-hover: #a83327;
--gg-warm-copper: #b87333;
--gg-warm-copper-hover: #a0632b;
--gg-clinical-teal: #2a9d8f;
--gg-clinical-teal-hover: #238578;
--gg-status-green: #4a7c59;
--gg-status-amber: #d4a03c;
--gg-status-red: #c43d2f;
--gg-star-gold: #ebb551;
--gg-logo-coral: #ec6157; /* fill of the logo mark */
--gg-marquee-tint: #fbe9e5; /* light band behind the proof marquee */
/* Derived for contrast only (see README, "Accessibility adjustments") */
--gg-teal-deep: #1f7a6f; /* warm-white on it: 4.74:1 */
/* ------------------------------------------------------------------
2. Colour roles, base layer: the site's [data-theme=default].
Derived roles (cards, text steps, hairlines) are declared further
down on ":root, [data-theme]" so they follow any theme scope.
------------------------------------------------------------------ */
--color-bg: var(--gg-deep-charcoal);
--color-fg: var(--gg-warm-white);
--color-surface: var(--gg-surface-elevated); /* popovers, menus */
--color-footer: var(--gg-footer);
--color-primary: var(--gg-signal-red);
--color-primary-hover: var(--gg-signal-red-hover);
--color-primary-fg: var(--gg-warm-white);
--color-secondary: var(--gg-clinical-teal);
--color-secondary-hover: var(--gg-clinical-teal-hover);
--color-secondary-fg: var(--gg-warm-white);
--color-secondary-text: var(--gg-clinical-teal); /* teal set as text: 5.2:1 on charcoal */
--color-ring: var(--gg-clinical-teal);
/* Accent text: signal red is 3.35:1 on charcoal, so small red text on dark
uses the logo's own coral (5.3:1). */
--color-text-accent: var(--gg-logo-coral);
--color-tag: var(--gg-warm-copper); /* mono pills + eyebrows, 4.58:1 */
--color-badge-bg: var(--gg-teal-deep);
--color-badge-fg: var(--gg-warm-white);
/* Status */
--color-success: var(--gg-status-green);
--color-warning: var(--gg-status-amber);
--color-danger: var(--gg-status-red);
--color-rating: var(--gg-star-gold);
/* Mix knobs: how strongly the foreground shows through. Themes tune these. */
--mix-card: 5%;
--mix-wash: 8%;
--mix-muted: 70%;
--mix-subtle: 60%;
--mix-faint: 50%;
--mix-border: 15%;
--mix-border-subtle: 10%;
--mix-border-strong: 20%;
/* ------------------------------------------------------------------
3. Typography
------------------------------------------------------------------ */
--font-heading: "General Sans", generalSans, "General Sans Fallback", system-ui, sans-serif;
--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
--weight-regular: 400;
--weight-medium: 500; /* General Sans: nav, buttons, tile titles */
--weight-semibold: 600; /* Inter only (General Sans ships 500/700) */
--weight-bold: 700; /* General Sans: every heading */
/* Scale. Fluid values are the site's own clamp() ranges. */
--text-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem); /* h1: 36 to 56 */
--text-h2: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); /* feature h2: 32 to 57.6 */
--text-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); /* section h2: 24 to 40 */
--text-h4: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); /* card title: 22 to 26 */
--text-h5: 1.25rem; /* 20: person names, small titles */
--text-price: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); /* price: 24 to 32 */
--text-lead-lg: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);/* split-section lead: 18 to 24 */
--text-lead: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); /* hero lead: 16 to 20 */
--text-body-lg: 1.0625rem; /* 17 */
--text-body: 1rem; /* 16 */
--text-sm: 0.875rem; /* 14 */
--text-nav: 0.8125rem; /* 13: General Sans 500 */
--text-xs: 0.75rem; /* 12 */
--text-tag: 0.6875rem; /* 11: JetBrains Mono */
--text-badge: 0.625rem; /* 10: General Sans 700 (site: 9, raised for legibility) */
--leading-display: 1.08;
--leading-heading: 1.15;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-body: 1.6;
--leading-relaxed: 1.625;
--tracking-display: -0.03em;
--tracking-heading: -0.025em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-caps: 0.1em; /* Inter uppercase labels */
--tracking-mono: 0.14em; /* JetBrains Mono eyebrows + tags */
/* ------------------------------------------------------------------
4. Spacing: Tailwind's 4px base, the steps the site actually uses
------------------------------------------------------------------ */
--space-0: 0;
--space-0-5: 0.125rem; /* 2 */
--space-1: 0.25rem; /* 4 */
--space-1-5: 0.375rem; /* 6 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-3-5: 0.875rem; /* 14 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-9: 2.25rem; /* 36 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-14: 3.5rem; /* 56 */
--space-16: 4rem; /* 64 */
--space-18: 4.5rem; /* 72 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
/* Layout */
--gutter: var(--space-4); /* 16 → 24 (md) → 48 (xl) → 64 (2xl) */
--container-max: 1600px; /* content caps at 1600 and centres; bands stay full-bleed */
--container-prose: 55rem; /* 880: centred section intros */
--container-copy: 32.5rem; /* 520: split-section copy column */
--section-y: var(--space-10); /* 40 → 64 (md) → 80 (xl) → 128 (2xl) */
--card-pad-x: var(--space-6); /* 24 → 40 (md) → 56 (xl) */
--card-pad-y: var(--space-6); /* 24 → 36 (md) → 48 (xl) */
--grid-gap: var(--space-4); /* 16 → 20 (md) → 24 (xl) */
--header-h: 4rem; /* 64 → 72 (xl) */
/* ------------------------------------------------------------------
5. Radius
------------------------------------------------------------------ */
--radius-xs: 0.125rem; /* 2: text-link focus box */
--radius-sm: 0.5rem; /* 8: nav triggers, menu items */
--radius-md: 1rem; /* 16: the site's --radius, inputs in menus, thumbnails */
--radius-lg: 1.5rem; /* 24: cards, photo tiles, price card */
--radius-xl: 2rem; /* 32: feature + newsletter panels */
--radius-2xl: 2.5rem; /* 40: category tiles */
--radius-pill: 9999px; /* buttons, inputs, badges, tags */
/* ------------------------------------------------------------------
6. Shadow: dark UI, so shadows are deep and mostly felt, not seen
------------------------------------------------------------------ */
--shadow-hairline: inset 0 1px 0 rgb(247 245 242 / 0.08);
--shadow-card: 0 4px 16px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.08);
/* --shadow-card-hover and --shadow-primary follow the theme: see the derived block */
--shadow-panel: inset 0 1px 0 rgb(247 245 242 / 0.06), 0 24px 60px -32px rgb(0 0 0 / 0.6);
--shadow-raised: 0 16px 48px rgb(26 26 30 / 0.4), 0 4px 16px rgb(196 61 47 / 0.06);
--shadow-photo: 0 24px 40px rgb(0 0 0 / 0.5);
/* ------------------------------------------------------------------
7. Motion
------------------------------------------------------------------ */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind default, colours */
--ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1); /* the site's --ease-out-expo, movement */
--duration-instant: 90ms; /* press */
--duration-fast: 150ms; /* colour + background changes, button hover */
--duration-base: 200ms; /* card lift, border */
--duration-slow: 300ms; /* opacity fades */
--duration-image: 500ms; /* photo zoom inside a frame */
--vt-exit: 150ms; /* view transitions, from the site */
--vt-enter: 210ms;
--lift-card: -2px; /* hover:-translate-y-0.5 */
--press-scale: 0.98; /* active:scale-[0.98] */
--zoom-image: 1.03; /* hover:scale on photos, 1.01 to 1.04 on site */
/* Layering */
--z-header: 50;
--z-menu: 60;
color-scheme: dark;
}
/* Responsive steps of the layout tokens (Tailwind md 768, xl 1280, 2xl 1536) */
@media (min-width: 768px) {
:root {
--gutter: var(--space-6);
--section-y: var(--space-16);
--card-pad-x: var(--space-10);
--card-pad-y: var(--space-9);
--grid-gap: var(--space-5);
}
}
@media (min-width: 1280px) {
:root {
--gutter: var(--space-12);
--section-y: var(--space-20);
--card-pad-x: var(--space-14);
--card-pad-y: var(--space-12);
--grid-gap: var(--space-6);
--header-h: 4.5rem;
}
}
@media (min-width: 1536px) {
:root {
--gutter: var(--space-16);
--section-y: var(--space-32);
}
}
/* ------------------------------------------------------------------
Themes. The site ships three. Put data-theme on , a section or a card.
------------------------------------------------------------------ */
/* Executive Health / Gambit Gold: copper replaces red as the action colour */
[data-theme="executive"] {
--color-primary: var(--gg-warm-copper);
--color-primary-hover: var(--gg-warm-copper-hover);
--color-primary-fg: var(--gg-deep-charcoal);
--color-text-accent: var(--gg-warm-copper);
}
/* Derived roles. Re-declared on every theme scope so they resolve against
that scope's --color-fg / --color-primary. */
:root,
[data-theme] {
--color-card: color-mix(in oklch, var(--color-fg) var(--mix-card), transparent);
/* sRGB here on purpose: an oklch mix of warm-white into charcoal swings the hue
through red and reads brown. sRGB keeps the band a neutral step up. */
--color-band: color-mix(in srgb, var(--color-fg) 4%, var(--color-bg));
--color-accent-wash: color-mix(in oklch, var(--color-fg) var(--mix-wash), transparent); /* hover fills */
/* Text steps: the site sets text as foreground at an opacity */
--color-text: var(--color-fg);
--color-text-body: color-mix(in oklch, var(--color-fg) 85%, transparent); /* list items, card copy */
--color-text-lead: color-mix(in oklch, var(--color-fg) 80%, transparent); /* hero + section leads */
--color-text-muted: color-mix(in oklch, var(--color-fg) var(--mix-muted), transparent);
--color-text-subtle: color-mix(in oklch, var(--color-fg) var(--mix-subtle), transparent);
--color-text-faint: color-mix(in oklch, var(--color-fg) var(--mix-faint), transparent);
/* Hairlines */
--color-border: color-mix(in oklch, var(--color-fg) var(--mix-border), transparent);
--color-border-subtle: color-mix(in oklch, var(--color-fg) var(--mix-border-subtle), transparent);
--color-border-strong: color-mix(in oklch, var(--color-fg) var(--mix-border-strong), transparent);
--color-input: color-mix(in oklch, var(--color-fg) 20%, transparent);
--color-input-bg: color-mix(in oklch, var(--color-fg) 4%, transparent);
/* Washes used on the site's grounds and photo fades */
--wash-hero:
radial-gradient(900px 600px at 0 0, color-mix(in oklch, var(--color-primary) 8%, transparent), transparent 70%),
radial-gradient(1400px 900px at 100% 100%, rgb(255 255 255 / 0.024), transparent 70%);
--wash-card-top: radial-gradient(140% 100% at 50% 0%, color-mix(in oklch, var(--color-fg) 6%, transparent), transparent 55%);
--wash-photo-bottom: linear-gradient(to top, rgb(26 26 30 / 0.55) 0%, rgb(26 26 30 / 0) 50%);
--wash-image: color-mix(in oklch, var(--color-primary) 15%, transparent);
--hairline-glow: linear-gradient(90deg, transparent, color-mix(in oklch, var(--color-primary) 30%, transparent), transparent);
--shadow-card-hover: 0 8px 24px rgb(0 0 0 / 0.16), 0 2px 8px color-mix(in oklch, var(--color-primary) 14%, transparent);
--shadow-primary: 0 2px 10px color-mix(in oklch, var(--color-primary) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.12);
color: var(--color-text);
}
/* Women's Health: the light theme (after the derived block, so it wins).
"light" is an alias for light bands on any page. */
[data-theme="womens"],
[data-theme="light"] {
--color-bg: var(--gg-warm-white);
--color-fg: var(--gg-deep-charcoal);
--color-surface: var(--gg-white);
--color-text-accent: var(--gg-signal-red); /* 4.76:1 on warm-white */
--color-tag: var(--gg-warm-copper-hover); /* 4.87:1 on white */
--color-secondary-text: var(--gg-teal-deep); /* 5.16:1 on white; brand teal is 3.3:1 */
--mix-wash: 5%;
--mix-muted: 64%; /* site: 60%; raised to 64% for 4.5:1 on warm-white */
--mix-subtle: 64%;
--mix-faint: 64%;
--mix-border: 10%;
--mix-border-subtle: 8%;
--mix-border-strong: 18%;
--color-card: var(--gg-white);
--color-band: var(--gg-warm-white);
--color-input-bg: var(--gg-white);
--wash-hero: none;
--wash-card-top: none;
--wash-image: transparent;
--shadow-hairline: none;
--shadow-card: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.05);
--shadow-card-hover: 0 8px 24px rgb(0 0 0 / 0.08), 0 2px 8px color-mix(in oklch, var(--color-primary) 10%, transparent);
color-scheme: light;
}