/*
 * Design tokens. The single place where colour, type and spacing are named. Every stylesheet in web/ uses
 * these custom properties and nothing else for those concerns. Colours mirror /brand.json (the build checks it).
 * The shell lane may add tokens and set the font stacks; it must not rename or remove the ones below.
 */
:root {
  /* One field, one ink, one light. The alarm colour is for the game only. */
  --field: #0e3b43;
  --ink: #f2e9dc;
  --light: #ff8a5b;
  --alarm: #e5484d;
  --ink-75: color-mix(in srgb, var(--ink) 75%, transparent);
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  /* What lies under a dialog: the field itself, thick enough to push the page back. No fourth colour. */
  --scrim: color-mix(in srgb, var(--field) 82%, transparent);

  /* The same steps for anything set on the sand (an ink-coloured surface with field-coloured content). */
  --field-80: color-mix(in srgb, var(--field) 80%, transparent);
  --field-70: color-mix(in srgb, var(--field) 70%, transparent);
  --field-25: color-mix(in srgb, var(--field) 25%, transparent);
  --field-10: color-mix(in srgb, var(--field) 10%, transparent);

  /*
   * Type. Two self-hosted families (web/assets/fonts, SIL Open Font License 1.1; faces in fonts.css):
   *   Besley, a Clarendon, is the voice: headings and first-person prose.
   *   Barlow Semi Condensed is the evidence: labels, navigation, tables, live figures and their receipts.
   */
  --font-text: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, monospace;
  --text-xs: 0.8125rem;   /* provenance lines: small, but still read as a sentence */
  --text-s: 0.9375rem;
  --text-m: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --text-l: 1.5625rem;
  --text-xl: clamp(1.875rem, 3.1vw, 2.75rem);
  --text-value: clamp(1.75rem, 3vw, 2.625rem);  /* live figures; always tabular numerals */
  --text-title: clamp(2.375rem, 5.4vw, 4.75rem); /* the name of a page, set in the display face */
  --text-hero: clamp(2.5rem, 5.2vw, 5.25rem);    /* the tagline on the entry page */
  --leading-tight: 1.12;
  --leading-text: 1.55;

  /* Space and shape. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius: 5px;
  --hairline: 1px solid var(--ink-25);
  --hairline-sand: 1px solid var(--field-25);
  --target: 44px;          /* minimum size of anything clickable */
  --page-max: 1080px;

  /* Motion. Everything animated must also honour prefers-reduced-motion. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 160ms;
  --slow: 340ms;
}