@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrainsmono-latin-var.woff2") format("woff2");
}

/* Design tokens and element defaults. */

/* Design tokens */
:root {
  /* Brand */
  --brand-blue: #0858D8;
  --brand-blue-600: #0747B5;
  --brand-blue-700: #053A99;
  --brand-blue-300: #6FA0F0;
  --brand-blue-100: #DCE8FA;
  --brand-blue-50: #EEF4FD;
  --brand-navy: #082048;
  --brand-navy-700: #0F2D5C;
  --brand-navy-500: #1F3D70;
  --brand-navy-300: #5C6F92;

  /* Neutrals */
  --cream-50: #FBF8F2;
  --cream-100: #F5F0E6;
  --cream-200: #ECE5D5;
  --cream-300: #DDD3BD;
  --ink-900: #14181F;
  --ink-700: #2C313B;
  --ink-500: #555B68;
  --ink-400: #767D8C;
  --ink-300: #A4ABB8;
  --ink-200: #CBCFD8;
  --ink-100: #E6E8EE;
  --white: #FFFFFF;

  /* Status colors */
  --success: #0E6B48;
  --success-bg: #E5F4EC;
  --warning: #8A5715;
  --warning-bg: #FBEFD9;
  --danger: #C0392B;
  --danger-bg: #F8E5E2;
  --info: var(--brand-blue);
  --info-bg: var(--brand-blue-50);

  /* Surfaces */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --surface: var(--white);
  --surface-ink: var(--brand-navy);
  --border: var(--cream-200);
  --border-strong: var(--cream-300);
  --hairline: var(--ink-100);

  /* Text colors */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-500);
  --fg-display: var(--brand-navy);
  --fg-accent: var(--brand-blue);
  --fg-on-blue: var(--white);

  /* Font families */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Type scale */
  --fs-hero: clamp(48px, 7vw, 96px);
  --fs-display: clamp(36px, 5vw, 64px);
  --fs-h1: clamp(32px, 4vw, 48px);
  --fs-h2: clamp(26px, 3vw, 36px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-meta: 13px;
  --fs-micro: 11px;

  /* Line height and letter spacing */
  --lh-tight: 1.05;
  --lh-display: 1.12;
  --lh-heading: 1.22;
  --lh-body: 1.55;
  --lh-loose: 1.7;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-eyebrow: 0.14em;
  --ls-mono: 0;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 28px;
  --r-pill: 999px;
  --r-mark: 22%;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(8, 32, 72, 0.04);
  --shadow-sm: 0 1px 2px rgba(8, 32, 72, 0.06), 0 1px 1px rgba(8, 32, 72, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(8, 32, 72, 0.18), 0 2px 4px rgba(8, 32, 72, 0.05);
  /* Edge for white cards that carry a shadow: a cool line, so the edge reads as part of the shadow, not a warm rim */
  --card-edge: rgba(8, 32, 72, 0.1);
  --shadow-lg: 0 24px 48px -16px rgba(8, 32, 72, 0.22), 0 6px 12px rgba(8, 32, 72, 0.06);
  --shadow-glow: 0 0 0 4px rgba(8, 88, 216, 0.18);
  --inset-hairline: inset 0 0 0 1px var(--hairline);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* Element defaults */
html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--fg-display);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-display);
  margin: 0 0 var(--sp-2);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

/* Text utilities */
.t-meta {
  font-size: var(--fs-meta);
  color: var(--ink-500);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-accent);
}

/* Links */
a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-blue) 30%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

a:hover {
  text-decoration-color: var(--brand-blue);
}

/* Text selection */
::selection {
  background: var(--brand-blue-100);
  color: var(--brand-navy);
}

.u-nowrap {
  white-space: nowrap;
}

/* Read by screen readers, not shown */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  color: var(--brand-navy);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(8, 32, 72, 0.25);
  transition: top 0.15s ease;
}

.u-skip:focus-visible {
  top: 12px;
}