/*
	Made in Cape Town ❤
*/
/*  Design tokens
 *
 *  The corporate palette: a deep navy taken from the logo, one restrained blue
 *  accent and a cool slate ink ramp. Every text pairing meets WCAG AA; body and
 *  secondary text clear 7:1.
 *
 *  Colour tokens are set by tone (see _tones.scss). The page shifts between
 *  tones as you scroll, so components read colours only from these tokens.
 */
:root {
  /* ----- type ----- */
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: clamp(2.5rem, 1.6rem + 2.9vw, 3.625rem);
  --text-h1: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem);
  --text-h2: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --tracking-tight: -0.03em;
  --tracking-label: 0.1em;
  /* ----- space (4px base) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(56px, 6vw, 88px);
  --gutter: clamp(20px, 5vw, 40px);
  /* ----- shape ----- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  /* ----- shell ----- */
  --shell: 1120px;
  --prose: 720px;
  /* ----- motion ----- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 75ms;
  --dur: 160ms;
  --dur-slow: 480ms;
  /* ----- brand (fixed, never re-toned) ----- */
  --brand-navy: #0b1f3a;
  --brand-navy-deep: #06142a;
  --brand-blue: #1a56b0;
  --brand-sky: #8ab4ff;
  --white: #ffffff;
}

:root {
  color-scheme: light;
}

/*  Tones
 *
 *  Three colour moods: light (white), mist (cool grey) and navy. Each tone
 *  sets the full colour-token set, so any component inside reads correctly.
 *
 *  A section declares its tone with data-tone="light" | "mist" | "navy" and
 *  paints that background, so each section's start and end is clear.
 *  .tone-navy (etc.) does the same for a component, e.g. the CTA panel.
 */
/* ----- animatable colour tokens -----
 * Registering the tokens as <color> lets the browser interpolate the variables
 * themselves, so an element that changes tone (the header, leaving the hero)
 * fades rather than snaps. Browsers without @property simply switch.
 */
@property --canvas {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --surface-subtle {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f6f9;
}
@property --surface-sunken {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef1f5;
}
@property --border {
  syntax: "<color>";
  inherits: true;
  initial-value: #e3e8ee;
}
@property --border-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: #c7d0db;
}
@property --text {
  syntax: "<color>";
  inherits: true;
  initial-value: #0f1b2d;
}
@property --text-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #475569;
}
@property --text-tertiary {
  syntax: "<color>";
  inherits: true;
  initial-value: #64748b;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a56b0;
}
@property --accent-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #134089;
}
@property --accent-subtle {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8f0fb;
}
@property --accent-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a56b0;
}
@property --on-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --focus {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a56b0;
}
/* ----- page default ----- */
:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f4f6f9;
  --surface-sunken: #eef1f5;
  --surface-invert: var(--brand-navy);
  --border: #e3e8ee;
  --border-strong: #c7d0db;
  --text: #0f1b2d;
  --text-secondary: #475569; /* 7.6:1 */
  --text-tertiary: #64748b; /* 4.8:1 */
  --text-invert: #ffffff;
  --accent: var(--brand-blue); /* 7:1, white on it 7:1 */
  --accent-hover: #134089;
  --accent-subtle: #e8f0fb;
  --accent-text: var(--brand-blue);
  --on-accent: #ffffff;
  --focus: var(--brand-blue);
  --ok-subtle: #eef8ea;
  --ok-text: #2f6b12;
  --warn-subtle: #fff7e6;
  --warn-text: #8a5300;
  /* legacy inverted-band tokens: a navy block inside a light page */
  --band: var(--brand-navy);
  --band-text: #ffffff;
  --band-text-secondary: #b6c3d6;
  --band-border: #243a5c;
  --band-accent: var(--brand-sky);
  --shadow-z1: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-z2: 0 4px 16px rgba(15, 27, 45, 0.08);
  --shadow-z3: 0 16px 40px rgba(15, 27, 45, 0.12);
  --focus-ring: 0 0 0 3px var(--canvas), 0 0 0 5px var(--focus);
}

/* ----- section tones ----- */
[data-tone="light"],
.tone-light {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f4f6f9;
  --surface-sunken: #eef1f5;
  --surface-invert: var(--brand-navy);
  --border: #e3e8ee;
  --border-strong: #c7d0db;
  --text: #0f1b2d;
  --text-secondary: #475569; /* 7.6:1 */
  --text-tertiary: #64748b; /* 4.8:1 */
  --text-invert: #ffffff;
  --accent: var(--brand-blue); /* 7:1, white on it 7:1 */
  --accent-hover: #134089;
  --accent-subtle: #e8f0fb;
  --accent-text: var(--brand-blue);
  --on-accent: #ffffff;
  --focus: var(--brand-blue);
  --ok-subtle: #eef8ea;
  --ok-text: #2f6b12;
  --warn-subtle: #fff7e6;
  --warn-text: #8a5300;
  /* legacy inverted-band tokens: a navy block inside a light page */
  --band: var(--brand-navy);
  --band-text: #ffffff;
  --band-text-secondary: #b6c3d6;
  --band-border: #243a5c;
  --band-accent: var(--brand-sky);
  --shadow-z1: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-z2: 0 4px 16px rgba(15, 27, 45, 0.08);
  --shadow-z3: 0 16px 40px rgba(15, 27, 45, 0.12);
  --focus-ring: 0 0 0 3px var(--canvas), 0 0 0 5px var(--focus);
}

[data-tone="mist"],
.tone-mist {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f4f6f9;
  --surface-sunken: #eef1f5;
  --surface-invert: var(--brand-navy);
  --border: #e3e8ee;
  --border-strong: #c7d0db;
  --text: #0f1b2d;
  --text-secondary: #475569; /* 7.6:1 */
  --text-tertiary: #64748b; /* 4.8:1 */
  --text-invert: #ffffff;
  --accent: var(--brand-blue); /* 7:1, white on it 7:1 */
  --accent-hover: #134089;
  --accent-subtle: #e8f0fb;
  --accent-text: var(--brand-blue);
  --on-accent: #ffffff;
  --focus: var(--brand-blue);
  --ok-subtle: #eef8ea;
  --ok-text: #2f6b12;
  --warn-subtle: #fff7e6;
  --warn-text: #8a5300;
  /* legacy inverted-band tokens: a navy block inside a light page */
  --band: var(--brand-navy);
  --band-text: #ffffff;
  --band-text-secondary: #b6c3d6;
  --band-border: #243a5c;
  --band-accent: var(--brand-sky);
  --shadow-z1: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.04);
  --shadow-z2: 0 4px 16px rgba(15, 27, 45, 0.08);
  --shadow-z3: 0 16px 40px rgba(15, 27, 45, 0.12);
  --focus-ring: 0 0 0 3px var(--canvas), 0 0 0 5px var(--focus);
  --canvas: #f4f6f9;
  --surface-subtle: #ffffff;
  --text-secondary: #44526a; /* 7:1 on mist */
}

[data-tone="navy"],
.tone-navy {
  --canvas: var(--brand-navy);
  --surface: #11284a;
  --surface-subtle: #0e2442;
  --surface-sunken: var(--brand-navy-deep);
  --surface-invert: #ffffff;
  --border: #1f3659;
  --border-strong: #2f4a73;
  --text: #ffffff;
  --text-secondary: #b6c3d6; /* 9.2:1 */
  --text-tertiary: #8fa0b8; /* 5.9:1 */
  --text-invert: var(--brand-navy);
  --accent: #ffffff;
  --accent-hover: #dbe7ff;
  --accent-subtle: rgba(138, 180, 255, 0.14);
  --accent-text: var(--brand-sky); /* 7.9:1 */
  --on-accent: var(--brand-navy);
  --focus: var(--brand-sky);
  --ok-subtle: rgba(120, 200, 90, 0.14);
  --ok-text: #a6e08a;
  --warn-subtle: rgba(250, 190, 80, 0.14);
  --warn-text: #ffd27a;
  /* a light block inside a navy page */
  --band: #ffffff;
  --band-text: var(--brand-navy);
  --band-text-secondary: #475569;
  --band-border: #e3e8ee;
  --band-accent: var(--brand-blue);
  --shadow-z1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-z2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-z3: 0 16px 40px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px var(--canvas), 0 0 0 5px var(--focus);
}

[data-tone] {
  background-color: var(--canvas);
  color: var(--text);
}

.tone-light,
.tone-mist,
.tone-navy {
  color: var(--text);
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/public-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/public-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/public-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}