/* ---------------------------------------------------------------------------
   THEME. Every colour, font, size, and spacing value for the report page lives
   here. The design studio restyles the page by editing this file only.
   page.css reads these variables and holds no values of its own.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --c-ground: #0a0e27;        /* navy page background */
  --c-text: #f5f6fa;          /* off-white, primary text */
  --c-muted: #9aa0be;         /* grey, secondary text and labels */
  --c-accent: #ff5100;        /* orange, the only accent */
  --c-on-accent: #ffffff;     /* text on the orange button */
  --c-line: #262d50;          /* input borders and dividers */
  --c-error: #ff5a4d;         /* validation messages */

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-wordmark: 24px;
  --fs-headline: clamp(30px, 8vw, 46px);
  --fs-body: 16px;
  --fs-report-title: 16px;
  --fs-label: 11px;
  --fs-input: 16px;           /* 16px or more stops iOS zooming into the field */
  --fs-button: 16px;
  --fs-small: 13px;
  --fs-thanks: 22px;

  --fw-wordmark: 800;
  --fw-headline: 800;
  --fw-strong: 700;

  --tracking-headline: -0.03em;
  --tracking-wordmark: -0.05em;
  --tracking-label: 0.12em;

  /* layout and spacing */
  --page-max: 520px;
  --page-pad-x: 22px;
  --page-pad-top: 28px;
  --page-pad-bottom: 40px;
  --space-xs: 6px;
  --space-s: 12px;
  --space-m: 20px;
  --space-l: 28px;
  --space-xl: 44px;

  /* controls */
  --radius: 8px;
  --input-height: 48px;
  --button-height: 52px;
  --accent-bar: 3px;
}