/* ==========================================================================
   Design tokens — the single place to re-skin the site.
   Change --accent / --accent-deep to switch the accent colour everywhere.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Accent — safety orange. Text on it is always navy (contrast 6:1). */
  --accent: #f26a1b;
  --accent-hover: #ff7f35;
  --accent-deep: #b94609; /* accent used as text on light backgrounds (≥4.9:1 on white and light grey) */
  --on-accent: #0b1626;

  /* Navy / charcoal ramp */
  --ink-950: #070f1b;
  --ink-900: #0b1626;
  --ink-800: #111f33;
  --ink-700: #1b2c44;
  --ink-600: #2b3d57;

  /* Concrete greys */
  --stone-25: #fafbfc;
  --stone-50: #f4f6f8;
  --stone-100: #eceff3;
  --stone-200: #dfe3e9;
  --stone-300: #c8ced7;
  --stone-400: #a3acb8;
  --stone-500: #7b8594;
  --stone-600: #5a6574;

  --white: #ffffff;
  --text: #1c2739;
  --text-muted: #566274;
  --danger: #b42318;
  --success: #16794c;

  /* Type */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.3125rem, 1.15rem + 0.75vw, 1.6875rem);
  --step-3: clamp(1.6875rem, 1.35rem + 1.5vw, 2.375rem);
  --step-4: clamp(2rem, 1.4rem + 2.7vw, 3.5rem);
  --step-5: clamp(2.375rem, 1.2rem + 5.4vw, 5.125rem);

  /* Space & layout */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 1240px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 4.75rem;

  /* One two-column grid for every split section, so right-hand columns always start at the same x */
  --split: minmax(0, 5fr) minmax(0, 7fr);
  --split-gap: clamp(2.5rem, 6vw, 6.5rem);

  /* Shape */
  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.375rem;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(11, 22, 38, 0.05), 0 4px 14px -6px rgba(11, 22, 38, 0.1);
  --shadow-md: 0 2px 4px rgba(11, 22, 38, 0.05), 0 18px 40px -16px rgba(11, 22, 38, 0.28);
  --shadow-lg: 0 4px 8px rgba(11, 22, 38, 0.04), 0 30px 70px -30px rgba(11, 22, 38, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus: var(--accent-deep);
}