/* Generated by build_tokens.py from tokens.json. Do not edit by hand. */
:root {

  /* Colour */
  --sf-midnight: #090B14;
  --sf-deep-blue: #11172A;
  --sf-off-white: #F5F4F0;
  --sf-white: #FFFFFF;
  --sf-warm-neutral: #D8D4CC;
  --sf-slate: #7F879B;
  --sf-electric-blue: #4677FF;
  --sf-growth-purple: #8C4DFF;
  --sf-soft-lavender: #C8B7FF;
  --sf-signal-cyan: #78E7F5;
  --sf-blue-on-light: #245EFF;
  --sf-purple-on-light: #8340FF;
  --sf-slate-on-light: #666E83;
  --sf-cta-start: #3268FF;
  --sf-cta-end: #8B4BFF;
  --sf-success: #3FBF87;
  --sf-success-text: #297C58;
  --sf-warning: #E0A335;
  --sf-warning-text: #926616;
  --sf-error: #C4485F;
  --sf-error-text: #C14058;
  --sf-error-on-dark: #CC6074;
  --sf-info: #78E7F5;
  --sf-night-soft: #0E1223;
  --sf-night-soft-raised: #131932;
  --sf-night: #0B0E1B;
  --sf-mist: #F2F3FA;

  /* Gradients */
  --sf-gradient-brand: linear-gradient(135deg, var(--sf-electric-blue) 0%, var(--sf-growth-purple) 100%);
  --sf-gradient-cta: linear-gradient(135deg, var(--sf-cta-start) 0%, var(--sf-cta-end) 100%);

  /* Type */
  --sf-font-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --sf-font-serif: "Instrument Serif", Georgia, serif;
  --sf-fw-regular: 400;
  --sf-fw-medium: 500;
  --sf-fw-semibold: 600;
  --sf-fw-bold: 700;
  --sf-fw-extrabold: 800;
  --sf-fs-display-xl: clamp(3rem, 2.12rem + 3.756vw, 5.5rem);
  --sf-lh-display-xl: 0.92;
  --sf-ls-display-xl: -0.03em;
  --sf-tw-display-xl: 800;
  --sf-fs-display: clamp(2.625rem, 1.965rem + 2.817vw, 4.5rem);
  --sf-lh-display: 0.96;
  --sf-ls-display: -0.025em;
  --sf-tw-display: 700;
  --sf-fs-h1: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);
  --sf-lh-h1: 1.05;
  --sf-ls-h1: -0.02em;
  --sf-tw-h1: 700;
  --sf-fs-h2: clamp(2.125rem, 1.817rem + 1.315vw, 3rem);
  --sf-lh-h2: 1.1;
  --sf-ls-h2: -0.015em;
  --sf-tw-h2: 700;
  --sf-fs-h3: clamp(1.625rem, 1.493rem + 0.5634vw, 2rem);
  --sf-lh-h3: 1.2;
  --sf-ls-h3: -0.01em;
  --sf-tw-h3: 600;
  --sf-fs-h4: 1.5rem;
  --sf-lh-h4: 1.25;
  --sf-ls-h4: 0em;
  --sf-tw-h4: 600;
  --sf-fs-body-lg: 1.25rem;
  --sf-lh-body-lg: 1.5;
  --sf-ls-body-lg: 0em;
  --sf-tw-body-lg: 400;
  --sf-fs-body: 1rem;
  --sf-lh-body: 1.6;
  --sf-ls-body: 0em;
  --sf-tw-body: 400;
  --sf-fs-small: 0.875rem;
  --sf-lh-small: 1.5;
  --sf-ls-small: 0em;
  --sf-tw-small: 400;
  --sf-fs-label: 0.75rem;
  --sf-lh-label: 1.2;
  --sf-ls-label: 0.1em;
  --sf-tw-label: 600;
  --sf-fs-caption: clamp(0.75rem, 0.728rem + 0.0939vw, 0.8125rem);
  --sf-lh-caption: 1.45;
  --sf-ls-caption: 0em;
  --sf-tw-caption: 400;

  /* Space */
  --sf-space-4: 4px;
  --sf-space-8: 8px;
  --sf-space-12: 12px;
  --sf-space-16: 16px;
  --sf-space-24: 24px;
  --sf-space-32: 32px;
  --sf-space-48: 48px;
  --sf-space-64: 64px;
  --sf-space-96: 96px;
  --sf-space-128: 128px;

  /* Radius */
  --sf-radius-xs: 4px;
  --sf-radius-sm: 8px;
  --sf-radius-md: 12px;
  --sf-radius-pill: 999px;

  /* Motion */
  --sf-dur-fast: 150ms;
  --sf-dur-base: 250ms;
  --sf-dur-slow: 600ms;
  --sf-dur-logo: 2200ms;
  --sf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-stagger: 70ms;

  /* Layout */
  --sf-container: 1280px;
  --sf-gutter-sm: 20px;
  --sf-gutter-md: 40px;
  --sf-header-height: 76px;
  --sf-measure: 68ch;
  --sf-section-y: clamp(4.5rem, 3.268rem + 5.258vw, 8rem);

  /* Layers */
  --sf-z-sticky: 100;
  --sf-z-dropdown: 200;
  --sf-z-overlay: 300;
  --sf-z-modal: 400;
  --sf-z-toast: 500;

  /* Shadows (both themes; the light theme adds its own levels below) */
  --sf-shadow-float: 0 24px 64px rgba(9, 11, 20, 0.45);

  /* Breakpoints (for reference; media queries need literal values): md 768px, lg 1024px, xl 1440px */
}

/* Surfaces: components read these, so they adapt to the section they sit in. */

:root,
.sf-light {
  --sf-bg: var(--sf-off-white);
  --sf-bg-raised: var(--sf-white);
  --sf-fg: var(--sf-midnight);
  --sf-fg-muted: var(--sf-slate-on-light);
  --sf-fg-body: var(--sf-slate-on-light);
  --sf-fg-accent: var(--sf-purple-on-light);
  --sf-link: var(--sf-blue-on-light);
  --sf-focus: var(--sf-blue-on-light);
  --sf-border: rgba(9, 11, 20, 0.12);
  --sf-border-strong: rgba(9, 11, 20, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: var(--sf-white);
  --sf-hover: rgba(9, 11, 20, 0.04);
  --sf-fg-error: var(--sf-error-text);
  --sf-fg-success: var(--sf-success-text);
}

.sf-white {
  --sf-bg: var(--sf-white);
  --sf-bg-raised: var(--sf-off-white);
  --sf-fg: var(--sf-midnight);
  --sf-fg-muted: var(--sf-slate-on-light);
  --sf-fg-body: var(--sf-slate-on-light);
  --sf-fg-accent: var(--sf-purple-on-light);
  --sf-link: var(--sf-blue-on-light);
  --sf-focus: var(--sf-blue-on-light);
  --sf-border: rgba(9, 11, 20, 0.12);
  --sf-border-strong: rgba(9, 11, 20, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: var(--sf-white);
  --sf-hover: rgba(9, 11, 20, 0.04);
  --sf-fg-error: var(--sf-error-text);
  --sf-fg-success: var(--sf-success-text);
}

.sf-dark {
  --sf-bg: var(--sf-midnight);
  --sf-bg-raised: var(--sf-deep-blue);
  --sf-fg: var(--sf-white);
  --sf-fg-muted: var(--sf-slate);
  --sf-fg-body: var(--sf-slate);
  --sf-fg-accent: var(--sf-soft-lavender);
  --sf-link: var(--sf-soft-lavender);
  --sf-focus: var(--sf-soft-lavender);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: rgba(255, 255, 255, 0.04);
  --sf-hover: rgba(255, 255, 255, 0.06);
  --sf-fg-error: var(--sf-error-on-dark);
  --sf-fg-success: var(--sf-success);
}

/* .sf-glow: a dark section with a brand glow behind its text. Slate drops to about 4:1 over the brightest part
   of a glow, so muted text switches to a lighter slate tint (at least 7:1 there), and running text with it. */
.sf-dark.sf-glow,
.sf-dark .sf-glow { --sf-fg-muted: color-mix(in srgb, var(--sf-slate) 55%, var(--sf-white)); --sf-fg-body: color-mix(in srgb, var(--sf-slate) 55%, var(--sf-white)); }

/* Themes. Without data-theme the page keeps its default mix of dark and light sections. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] .sf-light {
  --sf-bg: var(--sf-night-soft);
  --sf-bg-raised: var(--sf-night-soft-raised);
  --sf-fg: var(--sf-white);
  --sf-fg-muted: var(--sf-slate);
  --sf-fg-body: var(--sf-slate);
  --sf-fg-accent: var(--sf-soft-lavender);
  --sf-link: var(--sf-soft-lavender);
  --sf-focus: var(--sf-soft-lavender);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: rgba(255, 255, 255, 0.04);
  --sf-hover: rgba(255, 255, 255, 0.06);
  --sf-fg-error: var(--sf-error-on-dark);
  --sf-fg-success: var(--sf-success);
}

:root[data-theme="dark"] .sf-white {
  --sf-bg: var(--sf-night);
  --sf-bg-raised: var(--sf-deep-blue);
  --sf-fg: var(--sf-white);
  --sf-fg-muted: var(--sf-slate);
  --sf-fg-body: var(--sf-slate);
  --sf-fg-accent: var(--sf-soft-lavender);
  --sf-link: var(--sf-soft-lavender);
  --sf-focus: var(--sf-soft-lavender);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: rgba(255, 255, 255, 0.04);
  --sf-hover: rgba(255, 255, 255, 0.06);
  --sf-fg-error: var(--sf-error-on-dark);
  --sf-fg-success: var(--sf-success);
}

/* Light theme, "Paper, Cloud and Mist": three cool steps of one temperature (hue 228-232, Midnight's own
   undertone) mirror the dark theme's three surfaces: Paper #FFFFFF, Cloud (1.06:1), Mist (1.11:1). These tokens
   exist only in the light theme; brand primitives and the brand and CTA gradients never change. */
:root[data-theme="light"] {
  --sf-cloud: #F7F8FC;
  --sf-ink-body: #3A4155;
  --sf-ink-muted: #535A6D;
  --sf-purple-ink: #5B2BC4;
  --sf-badge-bg: color-mix(in srgb, var(--sf-soft-lavender) 35%, var(--sf-white));
  --sf-purple-wash: color-mix(in srgb, var(--sf-growth-purple) 8%, var(--sf-white));
  --sf-hairline: #E3E6F0;
  --sf-hairline-strong: #CFD5E2;
  --sf-tint: rgba(36, 60, 160, 0.045);
  --sf-shadow-1: 0 1px 2px rgba(9, 11, 20, 0.04), 0 2px 8px -2px rgba(9, 11, 20, 0.06);
  --sf-shadow-2: 0 2px 4px rgba(9, 11, 20, 0.04), 0 18px 36px -18px rgba(9, 11, 20, 0.20);
  --sf-shadow-3: 0 4px 12px rgba(9, 11, 20, 0.05), 0 40px 80px -36px rgba(9, 11, 20, 0.32);
  --sf-shadow-float: 0 2px 6px rgba(9, 11, 20, 0.05), 0 28px 64px -20px rgba(9, 11, 20, 0.24);
  --sf-shadow-cta: 0 10px 24px -12px rgba(88, 90, 255, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --sf-shadow-cta-hover: 0 14px 30px -12px rgba(88, 90, 255, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --sf-gradient-on-light: linear-gradient(135deg, var(--sf-blue-on-light) 0%, var(--sf-purple-on-light) 100%);
  --sf-gradient-rule: linear-gradient(90deg, var(--sf-electric-blue) 0%, var(--sf-growth-purple) 100%);
  --sf-well: linear-gradient(135deg, rgba(70, 119, 255, 0.09), rgba(140, 77, 255, 0.12));
  --sf-band:
    radial-gradient(820px 560px at 100% 0%, rgb(140 77 255 / 0.30), rgb(140 77 255 / 0) 70%),
    radial-gradient(760px 520px at 0% 100%, rgb(70 119 255 / 0.24), rgb(70 119 255 / 0) 70%),
    linear-gradient(170deg, var(--sf-midnight) 0%, var(--sf-deep-blue) 100%);
  --sf-moment:
    radial-gradient(46% 62% at 0% 0%, rgb(70 119 255 / 0.20), rgb(70 119 255 / 0) 70%),
    radial-gradient(50% 66% at 100% 100%, rgb(140 77 255 / 0.24), rgb(140 77 255 / 0) 70%);
  --sf-ambient:
    radial-gradient(64% 70% at 6% 0%, rgba(70, 119, 255, 0.17), rgba(70, 119, 255, 0) 72%),
    radial-gradient(56% 66% at 96% 0%, rgba(140, 77, 255, 0.16), rgba(140, 77, 255, 0) 72%);
}

/* Paper: the page, the white sections, and the chrome that is dark by default (body, header, hero, trust strip,
   footer). Every light surface shares one remap: ink running text over muted meta, blue-undertone hairlines, a
   cool tint, white cards. */
:root[data-theme="light"],
:root[data-theme="light"] .sf-white,
:root[data-theme="light"] .sf-dark {
  --sf-bg: var(--sf-white);
  --sf-bg-raised: var(--sf-white);
  --sf-fg: var(--sf-midnight);
  --sf-fg-muted: var(--sf-ink-muted);
  --sf-fg-body: var(--sf-ink-body);
  --sf-fg-accent: var(--sf-purple-on-light);
  --sf-link: var(--sf-blue-on-light);
  --sf-focus: var(--sf-blue-on-light);
  --sf-border: var(--sf-hairline);
  --sf-border-strong: var(--sf-hairline-strong);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: var(--sf-white);
  --sf-hover: var(--sf-tint);
  --sf-fg-error: var(--sf-error-text);
  --sf-fg-success: var(--sf-success-text);
}

/* Cloud: the alternate band (.sf-light is also the stepped band in the dark theme). */
:root[data-theme="light"] .sf-light {
  --sf-bg: var(--sf-cloud);
  --sf-bg-raised: var(--sf-white);
  --sf-fg: var(--sf-midnight);
  --sf-fg-muted: var(--sf-ink-muted);
  --sf-fg-body: var(--sf-ink-body);
  --sf-fg-accent: var(--sf-purple-on-light);
  --sf-link: var(--sf-blue-on-light);
  --sf-focus: var(--sf-blue-on-light);
  --sf-border: var(--sf-hairline);
  --sf-border-strong: var(--sf-hairline-strong);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: var(--sf-white);
  --sf-hover: var(--sf-tint);
  --sf-fg-error: var(--sf-error-text);
  --sf-fg-success: var(--sf-success-text);
}

/* Mist: the feature bands that are Midnight in the dark theme (system, voices, proof, ownership, the services
   hub's .sf-moment). They keep their weight as the deepest light step, and white cards read crisply on them. The
   one chapter band per long page (.sf-band, below) stays Midnight instead. */
:root[data-theme="light"] .sf-section.sf-dark:not(.final) { --sf-bg: var(--sf-mist); }

/* A .sf-glow inside a paper .sf-dark takes the ink too (the Paper row already covers a .sf-dark.sf-glow). */
:root[data-theme="light"] .sf-dark .sf-glow { --sf-fg-muted: var(--sf-ink-muted); --sf-fg-body: var(--sf-ink-body); }

/* Final CTA: the one Midnight "Sarafi Box" keeps the dark theme's own tokens and .sf-glow muted text. On Midnight
   the ink ladder runs in reverse: running text (Slate 30%, #D9DBE1) one step lighter than meta (Slate 55%). This
   also lifts the Box lead on /work, which measured 3.81:1 where it crosses the Box's purple glow, to 5.17:1. */
:root[data-theme="light"] .final.sf-dark {
  --sf-bg: var(--sf-midnight);
  --sf-bg-raised: var(--sf-deep-blue);
  --sf-fg: var(--sf-white);
  --sf-fg-muted: color-mix(in srgb, var(--sf-slate) 55%, var(--sf-white));
  --sf-fg-body: color-mix(in srgb, var(--sf-slate) 30%, var(--sf-white));
  --sf-fg-accent: var(--sf-soft-lavender);
  --sf-link: var(--sf-soft-lavender);
  --sf-focus: var(--sf-soft-lavender);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: rgba(255, 255, 255, 0.04);
  --sf-hover: rgba(255, 255, 255, 0.06);
  --sf-fg-error: var(--sf-error-on-dark);
  --sf-fg-success: var(--sf-success);
  color-scheme: dark;
}

/* One Midnight chapter band per long page (.sf-band): home How we work, service How it works, Growth Review
   Two ways to start, About Mission, Approach Process, case study What we built. It takes the Sarafi Box's token
   row; site.css paints it with --sf-band, full-bleed, square and without seams. */
:root[data-theme="light"] .sf-section.sf-dark.sf-band:not(.final) {
  --sf-bg: var(--sf-midnight);
  --sf-bg-raised: var(--sf-deep-blue);
  --sf-fg: var(--sf-white);
  --sf-fg-muted: color-mix(in srgb, var(--sf-slate) 55%, var(--sf-white));
  --sf-fg-body: color-mix(in srgb, var(--sf-slate) 30%, var(--sf-white));
  --sf-fg-accent: var(--sf-soft-lavender);
  --sf-link: var(--sf-soft-lavender);
  --sf-focus: var(--sf-soft-lavender);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-border-strong: rgba(255, 255, 255, 0.24);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: rgba(255, 255, 255, 0.04);
  --sf-hover: rgba(255, 255, 255, 0.06);
  --sf-fg-error: var(--sf-error-on-dark);
  --sf-fg-success: var(--sf-success);
  color-scheme: dark;
}

/* Cards on the band stay paper, so reading stays on paper in light mode: every light token (site.css drops
   their hairline and gives them a soft drop shadow). The field is the stage; the cards are the sheets. */
:root[data-theme="light"] .sf-section.sf-dark.sf-band:not(.final) .sf-card:not(.sf-card--outline) {
  --sf-bg: var(--sf-white);
  --sf-bg-raised: var(--sf-white);
  --sf-fg: var(--sf-midnight);
  --sf-fg-muted: var(--sf-ink-muted);
  --sf-fg-body: var(--sf-ink-body);
  --sf-fg-accent: var(--sf-purple-on-light);
  --sf-link: var(--sf-blue-on-light);
  --sf-focus: var(--sf-blue-on-light);
  --sf-border: var(--sf-hairline);
  --sf-border-strong: var(--sf-hairline-strong);
  --sf-control-border: var(--sf-slate);
  --sf-control-bg: var(--sf-white);
  --sf-hover: var(--sf-tint);
  --sf-fg-error: var(--sf-error-text);
  --sf-fg-success: var(--sf-success-text);
  color-scheme: light;
}

/* Print: sarafi.js prints in the light theme, with background graphics off, so the box and the band go back to
   paper. */
@media print {
  :root[data-theme="light"] .final.sf-dark {
    --sf-bg: var(--sf-white);
    --sf-bg-raised: var(--sf-white);
    --sf-fg: var(--sf-midnight);
    --sf-fg-muted: var(--sf-ink-muted);
    --sf-fg-body: var(--sf-ink-body);
    --sf-fg-accent: var(--sf-purple-on-light);
    --sf-link: var(--sf-blue-on-light);
    --sf-focus: var(--sf-blue-on-light);
    --sf-border: var(--sf-hairline);
    --sf-border-strong: var(--sf-hairline-strong);
    --sf-control-border: var(--sf-slate);
    --sf-control-bg: var(--sf-white);
    --sf-hover: var(--sf-tint);
    --sf-fg-error: var(--sf-error-text);
    --sf-fg-success: var(--sf-success-text);
    color-scheme: light;
  }

  :root[data-theme="light"] .sf-section.sf-dark.sf-band:not(.final) {
    --sf-bg: var(--sf-white);
    --sf-bg-raised: var(--sf-white);
    --sf-fg: var(--sf-midnight);
    --sf-fg-muted: var(--sf-ink-muted);
    --sf-fg-body: var(--sf-ink-body);
    --sf-fg-accent: var(--sf-purple-on-light);
    --sf-link: var(--sf-blue-on-light);
    --sf-focus: var(--sf-blue-on-light);
    --sf-border: var(--sf-hairline);
    --sf-border-strong: var(--sf-hairline-strong);
    --sf-control-border: var(--sf-slate);
    --sf-control-bg: var(--sf-white);
    --sf-hover: var(--sf-tint);
    --sf-fg-error: var(--sf-error-text);
    --sf-fg-success: var(--sf-success-text);
    color-scheme: light;
  }
}