/* Farron design tokens v1.0 (frozen 2026-10-08, fonts decided 2026-10-14).
   Taken from farron-tokens.css in the Farron style guide; keep in step with farron.tokens.json.
   Fonts: SIL Open Font License 1.1, licence texts in /fonts. Latin subsets, self-hosted. */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "League Gothic"; src: url("../fonts/league-gothic-latin-wdth.woff2") format("woff2"); font-weight: 400; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  /* colour: paper and lines */
  --fr-paper-field: #FCFAF2;      /* Shironeri */
  --fr-paper-surface: #FFFFFB;    /* Gofun */
  --fr-line-hairline: #DCDDDD;    /* Shironezumi */
  --fr-line-disabled: #91989F;    /* Ginnezumi: disabled only, fails for live text */

  /* colour: ink */
  --fr-ink-1: #1C1C1C;            /* Sumi */
  --fr-ink-2: #373C38;            /* Aisumi-cha */
  --fr-ink-3: #524E4D;            /* Keshizumi */

  /* colour: structure (Konjo) and its flop */
  --fr-structure: #003149;
  --fr-structure-hover: #0B4158;
  --fr-structure-pressed: #00273A;

  /* colour: blues */
  --fr-blue-ruri: #1E50A2;
  --fr-blue-shinbashi: #59B9C6;

  /* colour: severity and seal */
  --fr-severity-high: #8F2E14;    /* Bengara */
  --fr-severity-medium: #BF783A;  /* Kohaku, marker fill only */
  --fr-severity-low: var(--fr-ink-3);
  --fr-seal: #EB6101;             /* Shu: stamp ring and street hit only */

  /* register: light (default) */
  --fr-ground: var(--fr-paper-field);
  --fr-surface: var(--fr-paper-surface);
  --fr-text: var(--fr-ink-2);
  --fr-text-strong: var(--fr-ink-1);
  --fr-text-muted: var(--fr-ink-3);
  --fr-chrome: var(--fr-structure);
  --fr-link: var(--fr-blue-ruri);
  --fr-focus: var(--fr-blue-ruri);

  /* stripes */
  --fr-stripe-width: 3px;
  --fr-stripe-1: var(--fr-structure);
  --fr-stripe-2: var(--fr-blue-ruri);
  --fr-stripe-3: var(--fr-blue-shinbashi);

  /* space */
  --fr-space-base: 4px;
  --fr-space-1: 8px;
  --fr-space-2: 16px;
  --fr-space-3: 24px;
  --fr-space-4: 40px;
  --fr-space-5: 64px;

  /* radius */
  --fr-radius-none: 0;
  --fr-radius-card: 2px;
  --fr-radius-ring: 9999px;

  /* stroke */
  --fr-stroke-hairline: 1px;
  --fr-stroke-icon: 1.5px;
  --fr-stroke-focus: 2px;
  --fr-stroke-stripe: 3px;
  --fr-stroke-keyline: 4px;

  /* size */
  --fr-size-row: 32px;
  --fr-size-icon: 20px;
  --fr-size-touch: 44px;
  --fr-size-stamp-list: 24px;
  --fr-size-stamp-finding: 40px;

  /* type */
  --fr-font-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fr-font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fr-font-mono: "Courier Prime", "Courier New", monospace;
  --fr-font-street: "League Gothic", "Arial Narrow", Impact, sans-serif;

  --fr-features-text: "zero";
  --fr-features-numeric: "tnum", "zero";
  --fr-features-display: "tnum", "zero";
  --fr-features-street: "case";
  --fr-tracking-provenance: 0.02em;
  --fr-tracking-display: -0.01em;
  --fr-tracking-street: 0.01em;

  --fr-text-provenance: 11px / 16px var(--fr-font-mono);
  --fr-text-1: 12px / 16px var(--fr-font-text);
  --fr-text-2: 14px / 20px var(--fr-font-text);
  --fr-text-3: 16px / 24px var(--fr-font-text);
  --fr-text-4: 20px / 28px var(--fr-font-display);
  --fr-text-5: 28px / 36px var(--fr-font-display);
  --fr-text-6: 40px / 48px var(--fr-font-display);

  --fr-weight-regular: 400;
  --fr-weight-bold: 700;

  /* motion */
  --fr-duration-fast: 120ms;
  --fr-duration-base: 160ms;
  --fr-duration-stamp: 200ms;
  --fr-ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* register: dark. Marketing only, which this booth app is. */
.fr-register-dark {
  --fr-ground: var(--fr-structure);
  --fr-surface: var(--fr-structure);
  --fr-text: var(--fr-paper-field);
  --fr-text-strong: var(--fr-paper-field);
  --fr-text-muted: var(--fr-blue-shinbashi);
  --fr-chrome: var(--fr-paper-field);
  --fr-link: var(--fr-blue-shinbashi);
  --fr-focus: var(--fr-blue-shinbashi);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fr-duration-fast: 0ms; --fr-duration-base: 0ms; --fr-duration-stamp: 0ms; }
}
