/* Design tokens. Change colours, fonts and sizes here; styles.css only consumes these. */
:root {
  /* Brand colours */
  --brand: #0f3d5c;          /* primary blue: headings, links, section rules */
  --brand-deep: #0a2a40;     /* hero and footer background */
  --ember: #e2662b;          /* accent orange: buttons, highlights */
  --ember-hover: #c9541d;
  --ember-soft: #fbeee6;     /* accent tint for callouts */
  --ember-light: #f2a24c;    /* gradient end for the brand mark, kicker text on dark */

  /* Text and surfaces */
  --ink: #17212b;
  --ink-soft: #4a5764;
  --ink-muted: #7b8792;
  --line: #e3e8ec;
  --paper: #ffffff;
  --paper-tint: #f6f8f9;
  --on-dark-strong: #ffffff; /* headings on dark backgrounds */
  --on-dark: #d3dde6;        /* body text on dark backgrounds */
  --on-dark-muted: #93a4b3;

  /* Highlight for information still to be filled in (RSIN, email, etc.) */
  --pending-bg: #fff6d6;
  --pending-line: #e0b84a;
  --pending-ink: #5a4600;

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-size: 17px;
  --line-height: 1.6;

  /* Layout */
  --max-width: 1080px;       /* page width */
  --measure: 62ch;           /* max line length for running text */
  --gutter: 20px;            /* side padding */
  --radius: 10px;
  --toc-width: 240px;        /* foundation information page side navigation */
}