@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* L1 — project-approved brand palette */
  --zl-paper: #f4f1e8;
  --zl-surface: #fbf9f3;
  --zl-ink: #1c1b17;
  /* Direction colours for trend markers [Arjun, 2026-08-06]. Green is an
     addition to the locked L1 set, so it is deliberately desaturated and dark
     enough to sit on the kraft background beside vermilion rather than shout
     over it. Decline reuses vermilion — no second red. */
  --zl-positive: #2E6B4F;
  --zl-vermilion: #e34a2e;
  --zl-cobalt: #1c2f6e;
  --zl-cobalt-deep: #121a35;
  --zl-muted: #8b867a;

  /* Derived neutrals — no additional brand hues */
  --zl-body: #57534a;
  --zl-muted-text: #6f6b61;
  --zl-vermilion-text: #a9321f;
  --zl-on-vermilion: #000000;
  --zl-line: rgb(28 27 23 / 14%);
  --zl-line-strong: rgb(28 27 23 / 28%);
  --zl-wash: rgb(28 27 23 / 4%);
  --zl-vermilion-wash: rgb(227 74 46 / 10%);
  --zl-cobalt-wash: rgb(28 47 110 / 9%);
  --zl-on-dark: #fbf9f3;
  --zl-paper-a99: rgb(244 241 232 / 99%);
  --zl-paper-a94: rgb(244 241 232 / 94%);
  --zl-paper-a70: rgb(244 241 232 / 70%);
  --zl-paper-a16: rgb(244 241 232 / 16%);
  --zl-surface-a94: rgb(251 249 243 / 94%);
  --zl-surface-a92: rgb(251 249 243 / 92%);
  --zl-surface-a74: rgb(251 249 243 / 74%);
  --zl-ink-a05: rgb(28 27 23 / 5%);
  --zl-ink-a08: rgb(28 27 23 / 8%);
  --zl-vermilion-a00: rgb(227 74 46 / 0%);
  --zl-vermilion-a13: rgb(227 74 46 / 13%);
  --zl-vermilion-a24: rgb(227 74 46 / 24%);
  --zl-cobalt-a00: rgb(28 47 110 / 0%);
  --zl-cobalt-a15: rgb(28 47 110 / 15%);
  --zl-on-dark-a06: rgb(251 249 243 / 6%);
  --zl-on-dark-a08: rgb(251 249 243 / 8%);
  --zl-on-dark-a12: rgb(251 249 243 / 12%);
  --zl-on-dark-a18: rgb(251 249 243 / 18%);
  --zl-on-dark-a20: rgb(251 249 243 / 20%);
  --zl-on-dark-a22: rgb(251 249 243 / 22%);
  --zl-on-dark-a25: rgb(251 249 243 / 25%);
  --zl-on-dark-a30: rgb(251 249 243 / 30%);
  --zl-on-dark-a45: rgb(251 249 243 / 45%);
  --zl-on-dark-a54: rgb(251 249 243 / 54%);
  --zl-on-dark-a58: rgb(251 249 243 / 58%);
  --zl-on-dark-a62: rgb(251 249 243 / 62%);
  --zl-on-dark-a64: rgb(251 249 243 / 64%);
  --zl-on-dark-a66: rgb(251 249 243 / 66%);
  --zl-on-dark-a70: rgb(251 249 243 / 70%);

  /* Structural rail pattern — shared by vertical rails and horizontal dividers. */
  --zl-rail-pattern:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 0.9rem,
      var(--zl-line) 0.9rem,
      var(--zl-line) calc(0.9rem + 1px)
    );

  /* Typography families */
  --zl-font-display: "Instrument Sans", Arial, sans-serif;
  --zl-font-body: "Instrument Sans", Arial, sans-serif;
  --zl-font-ui: "Instrument Sans", Arial, sans-serif;
  --zl-font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --zl-font-sans: var(--zl-font-body);

  /* Typography weights */
  --zl-weight-regular: 400;
  --zl-weight-medium: 500;
  --zl-weight-semibold: 600;
  --zl-weight-bold: 700;

  --zl-text-xs: 0.75rem;
  --zl-text-sm: 0.875rem;
  --zl-text-md: 1rem;
  --zl-text-lg: clamp(1.0625rem, 0.96rem + 0.35vw, 1.3125rem);
  --zl-text-h3: clamp(1.75rem, 1.38rem + 1.2vw, 2.75rem);
  --zl-text-h2: clamp(2.25rem, 1.65rem + 2.2vw, 3.75rem);
  --zl-text-feature-heading: clamp(2.25rem, 4.5vw, 4.75rem);
  --zl-text-display: clamp(3rem, 2rem + 4vw, 5rem);

  /* Semantic typography roles */
  --zl-type-hero-size: clamp(2.25rem, calc(2rem + 1.5vw), 3.35rem);
  --zl-type-hero-tablet-size: clamp(2.25rem, 4.5vw, 3rem);
  --zl-type-hero-mobile-size: clamp(2rem, 8.6vw, 2.25rem);
  --zl-type-feature-heading-size: var(--zl-text-feature-heading);
  --zl-type-section-heading-size: clamp(3.25rem, 4.5vw, 4.25rem);
  --zl-type-section-heading-mobile-size: clamp(2.35rem, 10vw, 3.2rem);
  --zl-type-lead-size: var(--zl-text-lg);
  --zl-type-lead-prominent-size: clamp(1.35rem, 1.8vw, 1.7rem);
  --zl-type-lead-mobile-size: 1.125rem;
  --zl-type-summary-size: clamp(1.45rem, 2.2vw, 2rem);
  --zl-type-summary-secondary-size: clamp(1.25rem, 1.2rem + 0.55vw, 1.75rem);
  --zl-type-stat-size: clamp(1.45rem, 2.1vw, 2.25rem);
  --zl-type-card-heading-size: clamp(1rem, 1vw, 1.2rem);
  --zl-type-card-body-size: 0.9rem;

  --zl-leading-tight: 0.98;
  --zl-leading-heading: 1.08;
  --zl-leading-copy: 1.55;
  --zl-leading-hero: 1.02;
  --zl-leading-feature: 0.98;
  --zl-leading-section: 0.98;
  --zl-leading-lead: 1.48;
  --zl-leading-lead-prominent: 1.45;
  --zl-leading-summary: 1.42;
  --zl-leading-card: 1.5;

  --zl-tracking-display: -0.045em;
  --zl-tracking-heading: -0.055em;
  --zl-tracking-summary: -0.025em;
  --zl-tracking-label: 0.11em;
  --zl-tracking-data: 0.08em;

  --zl-space-1: 0.25rem;
  --zl-space-2: 0.5rem;
  --zl-space-3: 0.75rem;
  --zl-space-4: 1rem;
  --zl-space-5: 1.5rem;
  --zl-space-6: 2rem;
  --zl-space-7: 3rem;
  --zl-space-8: 4rem;
  --zl-space-9: 6rem;
  --zl-space-10: 9rem;

  --zl-page-gutter: clamp(1.25rem, 3vw, 3rem);
  --zl-frame-max: 108rem;
  --zl-nav-height: 4.5rem;
  --zl-section-space: clamp(5.5rem, 9vw, 9.5rem);

  --zl-radius-none: 0;
  --zl-radius-pill: 999px;

  --zl-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --zl-ease-signal: cubic-bezier(0.16, 1, 0.3, 1);
  --zl-ease-linear: linear;
  --zl-ease-in-out: ease-in-out;
  --zl-ease-out: ease-out;
  --zl-duration-fast: 180ms;
  /* One hop of the nav focus frame from card to card. Kept in step with HOP
     in scripts/site-nav.js, which has to know when the hop has landed. */
  --zl-nav-hop: 220ms;
  /* Card growing to its hover description. Kept in step with DESC_SETTLE in
     scripts/site-nav.js, which waits for it before resetting the typed text. */
  --zl-nav-desc: 240ms;
  --zl-duration-brief: 260ms;
  --zl-duration-medium: 320ms;
  --zl-duration-reveal: 500ms;
  --zl-duration-highlight: 780ms;
  --zl-duration-pulse: 1.2s;
  --zl-duration-pulse-slow: 1.8s;
  --zl-duration-route-short: 1.7s;
  --zl-duration-route-mid: 1.9s;
  --zl-duration-route: 2.2s;
  --zl-duration-route-extended: 2.3s;
  --zl-duration-route-long: 2.6s;
  --zl-duration-sequence: 7.2s;
  --zl-duration-cycle: 7.5s;
  --zl-duration-reduced: 0.01ms;
  --zl-stagger-fast: 150ms;
  --zl-stagger-medium: 550ms;
  --zl-stagger-slow: 600ms;
  --zl-delay-short: 500ms;
  --zl-delay-medium: 800ms;
  --zl-delay-long: 1.1s;
  --zl-delay-stage: 3.2s;
  /* Outbound-link arrow, used as a mask so it takes currentColor. */
  --zl-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 3.1h8.3v8.3h-1.7V6L3.9 13.5 2.7 12.3l7.4-7.5H4.6z'/%3E%3C/svg%3E");
}