/* Design tokens: colour, type, spacing and motion. Every other file reads from here. */
:root {
  /* Palette: the record office, sealed in burnt orange. Seal is spent on two things only: the
     primary action and the lawyer's sign-off. Checks and everything else are in Carbon. */
  --bond: #f3f4f5;        /* page paper */
  --sheet: #fcfdfd;       /* form fields, product cards, text on Seal */
  --folio: #e4e7ea;       /* footer and light product backdrops */
  --mist: #d2d7dc;        /* light rules, highlights, selection, lines on dark */
  --pewter: #9da4ac;      /* idle text and outlines on dark */
  --graphite: #47505a;    /* secondary text, field borders */
  --carbon: #14181d;      /* ink: text, header, secondary buttons, routes on light */
  --seal: #bc4416;        /* main colour: burnt orange */
  --seal-light: #f6a87a;  /* main colour on dark surfaces: checked, signed off */
  --greywacke: #36414a;   /* stone surface */
  --flag: #a8123e;        /* errors only: crimson, kept well apart from Seal */

  /* Roles: what components read */
  --paper: var(--bond);
  --ink: var(--carbon);
  --ink-2: var(--graphite);
  --mute: var(--pewter);
  --line: color-mix(in srgb, var(--carbon) 24%, var(--bond));   /* hairline rules */
  --mark: var(--ink);
  --primary: var(--seal);
  --on-primary: var(--sheet);
  --scrim: rgba(20, 24, 29, .5);

  /* Type */
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --sans: "Host Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-display: clamp(44px, 5.1vw, 76px);
  --fs-statement: clamp(36px, 4.2vw, 62px);
  --fs-h2: clamp(32px, 3.15vw, 46px);
  --fs-stat: clamp(52px, 5vw, 72px);
  --fs-card: clamp(26px, 2.8vw, 40px);
  --fs-sub: clamp(20px, 1.95vw, 28px);
  --fs-body: 16px;
  --fs-ui: 14px;
  --fs-small: 12px;

  /* Layout */
  --margin: 20px;
  --gutter: 20px;
  --page-max: 1680px;
  /* Side padding for full-bleed sections: the margin, or more on very wide screens */
  --inset: max(var(--margin), calc((100% - var(--page-max)) / 2 + var(--margin)));
  --announce-h: 30px;
  --header-h: 64px;
  /* Tick used inside CSS checkpoint marks */
  --tick-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.2 4 7.6 8.6 2.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Motion */
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: linear(0, 0.059 3%, 0.205 7%, 0.394 10%, 0.593 13%, 0.776 17%, 0.927 20%, 1.041 23%, 1.115 27%, 1.153 30%, 1.163 33%, 1.152 37%, 1.127 40%, 1.095 43%, 1.063 47%, 1.034 50%, 1.01 53%, 0.992 57%, 0.98 60%, 0.975 63%, 0.973 67%, 0.976 70%, 0.98 73%, 0.985 77%, 0.99 80%, 0.995 83%, 0.999 87%, 1.002 90%, 1.003 93%, 1.004 97%, 1);
  --dur-spring: .72s;
}

@media (min-width: 1600px) {
  :root { --margin: 32px; --gutter: 24px; }
}