/* Socratix AI — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f9fbfa; /* Page background (site --background). Dark: the site's footer ink. */
  --surface-raised: #ffffff; /* Cards, the note card, the trust strip (site --card). Dark: the site's deep section band. */
  --surface-tint: #edf3f8; /* Results panels and soft callouts (site --secondary). Dark value derived to sit one step above surface-raised. */
  --surface-muted: #eaeef0; /* Quiet fills: table stripes, disabled fields (site --muted). Dark value derived. */
  --band: #173342; /* Full-bleed deep sections such as 'Meet Socratix' (site meta theme colour #173342). Set on-band text on it. */
  --line: #d3dade; /* Hairlines, dividers, input borders (site --border). Dark: white at 16%, as on the site's dark sections. Decorative only — not a control's only boundary. */
  --ink: #162a3b; /* Headlines and body text on surface, surface-raised, surface-tint and surface-muted (14:1 light, 10:1+ dark). */
  --ink-muted: #566976; /* Secondary copy, descriptions, nav links, the italic second line of a headline; on surface, surface-raised and surface-tint (≥4.9:1). Dark: white at 75%, as on the site's dark sections. */
  --on-band: #faf9f5; /* Text on band (12.5:1). */
  --on-band-muted: #ffffffbf; /* Body copy on band — white at 75%, as the site sets it (7.6:1). */
  --primary: #24516a; /* Links, client kickers, focus outlines and selected states (site --primary / --deep-dive). As text on surface and surface-raised (8.2:1 light, 6.9:1 dark). Dark value derived: lightened Deep Dive. */
  --on-primary: #faf9f5; /* Text and icons on a primary fill. */
  --action: #162a3b; /* Fill of the compact ink button ('Let’s talk'). */
  --on-action: #ffffff; /* Text on an action fill (14.7:1). */
  --accent: #ccad71; /* Gold. Fill of the main call to action ('Start a conversation'); eyebrows and italic accents on band and dark surfaces (6.2:1 on band). Never as text on light surfaces (2.1:1). */
  --on-accent: #11202c; /* Text and arrow on an accent fill (7.7:1). */
  --accent-strong: #806628; /* Gold for TEXT: eyebrows and small labels on surface, surface-raised and surface-tint (5.2:1 light). Dark switches to accent. */
  --ring: #24516a; /* Focus ring: 2px solid, 2px offset. ≥3:1 on every surface in both themes. */
  --danger: #9e3f2e; /* Errors and destructive actions (site --destructive); as text on the surfaces (6.5:1 / 5.6:1). Pair with a word or icon. Dark value derived. */
  --on-danger: #faf9f5; /* Text on a danger fill. */
  --scrim: #091822d9; /* Bottom of the photo overlay gradient (transparent → scrim) behind captions on images; on-band text sits on it. */
  --data-blue: #296185; /* First data series in charts (site --ocean-blue). Dark value derived to keep 3:1 on surface. */
  --data-red: #a74a35; /* Second data series, contrast to data-blue (site --ocean-red). Dark value derived. */
  --data-gold: #a5853b; /* Third data series and highlight marks (site --safari / --glow). */
  --deep-dive: #254e64; /* Brand book core colour 'Deep Dive' (aka Charcoal), Pantone 626C, CMYK 63 22 0 61. The secondary logo's ink; brand fills on print and slides. Seasalt text on it holds 8.4:1. */
  --slate: #353535; /* Brand book core colour 'Slate' (aka Jet), Pantone 447C, CMYK 0 0 0 79. The primary logo's ink; neutral dark for print and slides. */
  --seasalt: #f6f8f7; /* Brand book core colour 'Bright White' (aka Seasalt), Pantone 2375C, CMYK 1 0 0 3. The reversed logo; light ground for print and slides. */
  --safari: #b6a78e; /* Brand book core colour 'Safari' (aka Khaki), Pantone 252C, CMYK 0 8 22 29. Warm accent fills and rules only — 2.2:1 on seasalt, so never text on light grounds; fine as text on band or slate (6.2:1). */
  --shadow-note: 0 12px 50px 0 rgba(16, 40, 55, 0.09); /* The one shadow: a note card floating over a photo. Everything else is flat. */
}
[data-theme="dark"] {
  --surface: #162a3b;
  --surface-raised: #173342;
  --surface-tint: #1e4157;
  --surface-muted: #1b3a4c;
  --band: #11202c;
  --line: #ffffff29;
  --ink: #faf9f5;
  --ink-muted: #ffffffbf;
  --on-band: #faf9f5;
  --on-band-muted: #ffffffbf;
  --primary: #8fb7cc;
  --on-primary: #11202c;
  --action: #faf9f5;
  --on-action: #162a3b;
  --accent: #ccad71;
  --on-accent: #11202c;
  --accent-strong: #ccad71;
  --ring: #ccad71;
  --danger: #e08a72;
  --on-danger: #11202c;
  --scrim: #091822d9;
  --data-blue: #6fa3c4;
  --data-red: #e08a72;
  --data-gold: #ccad71;
  --deep-dive: #254e64;
  --slate: #353535;
  --seasalt: #f6f8f7;
  --safari: #b6a78e;
  --shadow-note: 0 12px 50px 0 rgba(0, 0, 0, 0.35);
}
:root {
  --space-1: 4px; /* Icon-to-text nudge, chip vertical padding (4.8px on site). */
  --space-2: 8px; /* Gap between button label and arrow. */
  --space-3: 12px; /* Compact button vertical padding; small stacks. */
  --space-4: 16px; /* Default stack gap; compact button horizontal padding (17.6px on site). */
  --space-5: 20px; /* Headline to paragraph. */
  --space-6: 24px; /* Card and results-panel padding; accent button horizontal padding. */
  --space-7: 28px; /* Discipline column vertical padding. */
  --space-8: 32px; /* Between list items in step sequences. */
  --space-10: 40px; /* Page gutter (container side padding). */
  --space-14: 56px; /* Footer top padding. */
  --space-16: 64px; /* Section padding on small screens. */
  --space-24: 96px; /* Section padding on desktop. */
  --radius-none: 0px; /* Default for cards, panels, images and sections — the site's --radius is 0. */
  --radius-xs: 3px; /* Small inline marks and inputs. */
  --radius-sm: 4px; /* Buttons. */
  --radius-pill: 999px; /* Credential chips and circular motifs only. */
  --container-max: 1344px; /* Max content width; side padding space-10. */
  --measure-headline: 17ch; /* Max width of section headlines. */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: Raleway, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-display-hero: 500 66.96px/70.98px var(--font-serif); /* The single hero headline per page (H1). Second line in italic, ink-muted. */
  --text-display-xl: 500 68px/69.36px var(--font-serif); /* Closing call-to-action headline. */
  --text-display-lg: 500 54.4px/57.66px var(--font-serif); /* Section headlines (H2). */
  --text-stat: 400 56px/64.4px var(--font-serif); /* Big numbers in proof/results panels. */
  --text-heading-lg: 500 30px/36px var(--font-serif); /* H3 and note-card statements. */
  --text-heading-md: 500 24px/32px var(--font-serif); /* Step and card titles. */
  --text-quote: 800 30px/36px var(--font-serif); /* Pull quotes and the tagline in collateral — the brand book's Playfair Display Extra Bold. */
  --text-term: 400 20px/24px var(--font-serif); /* Short terms in definition lists (hero pillars). */
  --text-lede: 400 24px/37.2px var(--font-sans); /* Intro paragraph under a section headline. */
  --text-body-lg: 400 18px/29.7px var(--font-sans); /* Hero description and long-form paragraphs. */
  --text-body: 400 16px/26px var(--font-sans); /* Default body copy. */
  --text-body-medium: 500 16px/26px var(--font-sans); /* Raleway Medium — the brand book's primary weight for print, slides and collateral. */
  --text-body-strong: 700 16px/24px var(--font-sans); /* Names, inline emphasis. */
  --text-kicker: 700 18px/27px var(--font-sans); /* Client or category kicker above a headline, in primary. */
  --text-button: 700 16px/22px var(--font-sans); /* Accent button label. */
  --text-nav: 400 15px/22.5px var(--font-sans); /* Navigation links and the compact ink button. */
  --text-small: 400 14px/21px var(--font-sans); /* Supporting copy, link buttons (at 700). */
  --text-caption: 400 13px/19.5px var(--font-sans); /* Captions and location lines. */
  --text-fine: 400 12px/19.5px var(--font-sans); /* Sources and footnotes. */
  --text-chip: 400 12px/18px var(--font-sans); /* Credential chips. */
  --text-eyebrow: 400 16px/24px var(--font-mono); /* Section eyebrows, set UPPERCASE, numbered '01 / …'. accent-strong on light, accent on band. */
}
.display-hero {
  font-family: var(--font-serif);
  font-size: 66.96px;
  line-height: 70.98px;
  font-weight: 500;
  letter-spacing: -3.01px;
}
.display-xl {
  font-family: var(--font-serif);
  font-size: 68px;
  line-height: 69.36px;
  font-weight: 500;
  letter-spacing: -1.224px;
}
.display-lg {
  font-family: var(--font-serif);
  font-size: 54.4px;
  line-height: 57.66px;
  font-weight: 500;
  letter-spacing: -0.816px;
}
.stat {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 64.4px;
  font-weight: 400;
  letter-spacing: -1.96px;
}
.heading-lg {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
.heading-md {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.36px;
}
.quote {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: 0;
}
.term {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.lede {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 37.2px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 29.7px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-medium {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.kicker {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.nav {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 400;
  letter-spacing: 0;
}
.fine {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 19.5px;
  font-weight: 400;
  letter-spacing: 0;
}
.chip {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0.24px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}