/* Aion Trackers design tokens. Values match brand-packet.md section 7. */
:root {
  /* Core */
  --aion-ink: #1b2a2f;
  --aion-slate: #566569;
  --aion-line: #dde4e3;
  --aion-mist: #f4f7f6;
  --aion-white: #ffffff;
  --aion-spruce: #1f6f6b;
  --aion-spruce-700: #17544f;
  --aion-spruce-300: #8dbfba;
  --aion-spruce-100: #e3f0ee;

  /* Status. Always pair with a text label, never colour alone. */
  --aion-status-at-place: #2e7d5b;
  --aion-status-moving: #2f6a8f;
  --aion-status-attention: #b3423a;
  --aion-status-offline: #566569;

  /* Type */
  --aion-font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --aion-text-display: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  --aion-text-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --aion-text-h3: 1.1875rem;
  --aion-text-lead: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --aion-text-body: 1.0625rem;
  --aion-text-small: 0.9375rem;
  --aion-text-label: 0.8125rem;

  /* Space, radius, layout */
  --aion-space-1: 0.25rem;
  --aion-space-2: 0.5rem;
  --aion-space-3: 0.75rem;
  --aion-space-4: 1rem;
  --aion-space-6: 1.5rem;
  --aion-space-8: 2rem;
  --aion-space-12: 3rem;
  --aion-space-16: 4rem;
  --aion-space-24: 6rem;
  --aion-space-32: 8rem;
  --aion-radius-s: 6px;
  --aion-radius-m: 10px;
  --aion-radius-l: 16px;
  --aion-max-width: 70rem;
}

/*
  Site layer. styles.css reads these names. The --aion-* values above still match
  brand-packet.md section 7; navy and the tints below were added for the 2026-11 redesign.
*/
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/InstrumentSans-latin-wght.woff2") format("woff2");
}

:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-tint: #f2f8f8;
  --color-tint-strong: #e1eff1;
  --color-tint-teal: #e3f0ee;
  --color-navy: #10293a;
  --color-navy-2: #17394f;

  --color-ink: #10293a;
  --color-muted: #4c6069;
  --color-on-accent: #ffffff;
  --color-on-navy: #dbe8ec;

  --color-accent: var(--aion-spruce);
  --color-accent-hover: var(--aion-spruce-700);
  --color-highlight: var(--aion-spruce);
  --color-sky: var(--aion-status-moving);

  --color-line: #dfe8ea;
  --color-line-strong: #c8d6da;
  --color-focus: #2f7fb8;
  --color-error: var(--aion-status-attention);
  --color-ok: var(--aion-spruce);

  --font-body: var(--aion-font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-display: clamp(2.75rem, 1.6rem + 4.8vw, 5.25rem);
  --text-h2: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 1px 2px rgb(16 41 58 / 5%), 0 8px 24px rgb(16 41 58 / 6%);
  --shadow-frame: 0 2px 4px rgb(16 41 58 / 6%), 0 24px 64px -12px rgb(16 41 58 / 24%);

  --width-page: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-section: clamp(3.25rem, 7.5vw, 6.5rem);
}