/* W4 Services LLC: design tokens (source: specs/design.md) */

/* Self-hosted font: Plus Jakarta Sans (variable 400–800, latin subset, WOFF2). Paths are relative to this CSS file. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Primary */
  --navy-950: #0B1530;
  --navy-900: #14224A;
  --navy-700: #1D2E8C;
  --red-600: #C8202A;
  --red-700: #B31C25;
  --red-500: #E5484D;

  /* Warm neutrals */
  --paper: #F5F2EC;
  --white: #FFFFFF;
  --stone-200: #E4DFD5;
  --stone-400: #B9B2A5;
  --ink: #0B1530;
  --slate-600: #4B5466;
  --slate-400: #7A8296;
  --mist: #A7B0C4;
  --line-dark: rgba(255, 255, 255, .12);

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .75rem;

  /* 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;
  --space-11: 160px;

  --section-y: var(--space-8);
  --gutter: 20px;
  --container: 1240px;

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-hover: 0 1px 2px rgba(11, 21, 48, .06), 0 8px 24px rgba(11, 21, 48, .06);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;
  --dur: 250ms;
  --dur-reveal: 600ms;

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: var(--space-9); }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --section-y: var(--space-10); --header-h: 88px; }
}