/*
 * Design tokens ("B · Airy", Space Grotesk + Inter).
 *
 * Source of truth: the "B · Airy · Font option 1: Space Grotesk + Inter" board on the design canvas.
 * Every component file reads these custom properties, so a colour/radius/font change happens here once.
 * The names are framework-neutral on purpose: a future non-WordPress front end can reuse this file as-is.
 *
 * Scope: everything in css/ is under body.wt-site (added on every front-end page by the mu-plugin).
 */
body.wt-site {
  /* Brand */
  --wt-blue: #006be8;
  --wt-blue-700: #0057c2;
  --wt-orange: #f57c20;
  --wt-orange-700: #e06a10;
  --wt-orange-text: #bf5400; /* orange as text on white: 4.7:1 (the brand orange is 2.7:1, fine only for fills/large numbers) */

  /* Ink & text */
  --wt-ink: #0b1220;
  --wt-ink-2: #0b1f44;
  --wt-text: #4a5263;
  --wt-muted: #5b6475;

  /* Lines & surfaces (no drop shadows: separate with borders and tints) */
  --wt-line: #e3e8f0;
  --wt-line-strong: #d6deea;
  --wt-line-soft: #dfe5ef;
  --wt-bg: #ffffff;
  --wt-tint-blue: #f3f7fe;
  --wt-tint-blue-2: #eef4fd;
  --wt-tint-grey: #f7f9fc;
  --wt-track: #f5f7fb;
  --wt-tint-orange: #fff4ec;

  /* Shape */
  --wt-r-sm: 12px;
  --wt-r-md: 16px;
  --wt-r-lg: 22px;
  --wt-r-xl: 32px;
  --wt-r-pill: 999px;

  /* Elevation: one barely-there shadow, used only by floating panels (dropdowns) */
  --wt-shadow-float: 0 6px 16px -10px rgb(16 24 40 / 0.10);
  --wt-ring: 0 0 0 3px rgb(0 107 232 / 0.25);

  /* Type */
  --wt-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wt-font-display: "Space Grotesk", Inter, system-ui, sans-serif;

  /* Motion */
  --wt-ease: cubic-bezier(.2, .7, .2, 1);
  --wt-fast: 150ms;

  /* Mobile spacing (<=767px): one gutter and one vertical rhythm for every legacy row */
  --wt-gutter-mobile: 16px;
  --wt-section-gap-mobile: 32px;
  --wt-card-pad-mobile: 20px;
  --wt-tap-min: 44px;
}