/* Audax Edge — design tokens (draft 2026-10-16).
   One copy lives in the marketing site (audaxedge-site: site/assets/css/tokens.css) and one in the app
   (audaxedge-app: app/web/static/css/tokens.css). Keep the two identical.
   Colours: the Audax Global brand kit plus a "night" navy taken from the report covers.
   Type: Saira Semi Condensed for headings (a charted, technical voice that sits next to the AUDAX wordmark)
   and Public Sans for text (the typeface of the U.S. Web Design System, familiar to federal readers).
   Both are free Google Fonts (SIL Open Font License). */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Saira+Semi+Condensed:wght@500;600;700&display=swap");

:root {
  color-scheme: light;

  /* Brand */
  --ink: #1d1d1d;
  --indigo: #40409a;
  --indigo-ink: #2f2f78;    /* indigo for small text on white */
  --night: #14173a;         /* report-cover navy: hero and dark bands */
  --night-2: #1f2350;
  --cyan: #14b0d2;          /* route lines, chart marks, accents on dark — never small text on white */
  --cyan-2: #13a6c3;
  --teal: #176c7e;          /* links */
  --blue: #2e6fb1;

  /* Neutrals */
  --paper: #ffffff;
  --mist: #eef2f7;
  --mist-2: #e2e8f0;
  --line: #d3dbe6;
  --muted: #566273;
  --on-night: #e8eaf7;
  --on-night-muted: #a9aed6;

  /* Status */
  --good: #1d7f4a;  --good-bg: #e8f5ee;
  --warn: #8f5a0b;  --warn-bg: #fdf4e3;
  --bad:  #b03030;  --bad-bg:  #fbeaea;

  /* Type */
  --font-display: "Saira Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: clamp(2.4rem, 5vw, 4rem);

  /* Space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --r-ctl: 4px;
  --r-panel: 6px;
  --measure: 66ch;
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: 0; }
p { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--indigo-ink); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
[tabindex="-1"]:focus { box-shadow: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 600 var(--fs-md)/1 var(--font-body);
  padding: 13px 20px; border-radius: var(--r-ctl); border: 1px solid transparent;
  background: var(--indigo); color: #fff; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--indigo-ink); color: #fff; }
.btn.secondary { background: var(--paper); color: var(--indigo-ink); border-color: var(--indigo); }
.btn.secondary:hover { background: var(--mist); color: var(--indigo-ink); }
.btn.quiet { background: transparent; color: var(--indigo-ink); border-color: var(--line); }
.btn.quiet:hover { background: var(--mist); }
.btn.on-night { background: var(--cyan); color: var(--night); }
.btn.on-night:hover { background: #fff; color: var(--night); }
.btn.ghost-night { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn.ghost-night:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn.small { padding: 8px 12px; font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* A value still to be decided. Dashed amber underline; the title attribute says what decides it.
   Search the repo for class="tbd" (and "placeholder": true in catalog.js) before launch. */
.tbd { border-bottom: 2px dashed var(--warn); cursor: help; }
.tbd-note { display: inline-block; font: 600 var(--fs-xs)/1.3 var(--font-body); color: var(--warn); background: var(--warn-bg); padding: 2px 6px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}