/* ==========================================================================
   Design tokens — London Victoria live board
   Every colour and font in styles.css references a name from this file.
   Contrast ratios in the comments are measured against the ground the token
   is actually used on, and verified by test/contrast.test.js.
   ========================================================================== */

/* Self-hosted so the board makes no third-party request and the content policy
   needs no external origin. Latin subset, 80 KB in total. See fonts/README.md
   for provenance and fonts/OFL.txt for the licence. */

@font-face {
  font-family: 'Hammersmith One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hammersmith-one-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-semi-condensed-700.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* -- grounds ------------------------------------------------------------
     The two panels are different materials, not two shades of one. The left
     is painted station ironwork; the right is an LED board, which is unlit
     pixels tinted a whisper toward the Victoria blue rather than flat #000. */
  --tunnel: #1b2126;
  --tunnel-lift: #212930;   /* a disrupted row sits proud of the panel */
  --tunnel-rule: #2e383f;
  --rail: #000205;
  --rail-rule: #16191b;

  /* -- identity ---------------------------------------------------------- */
  --seam: #0098d4;          /* Victoria line; the join between the panels */

  /* -- ink --------------------------------------------------------------- */
  --ink: #ffffff;           /* 21:1 on rail, 19:1 on tunnel */
  --ink-2: #c3cdd3;         /* 13:1 on tunnel */
  --ink-3: #869299;         /* 5.1:1 on tunnel, 6.6:1 on rail */

  /* -- enamel -------------------------------------------------------------
     The platform plate copies the vitreous-enamel signs on the concourse:
     a cool paper white, never a browser-default #fff. */
  --enamel: #f4f7f8;
  --enamel-ink: #0a0f12;    /* 17.9:1 */
  --enamel-off: #2e3438;    /* the plate for a cancelled service */
  --enamel-off-ink: #a7b2b8; /* 5.9:1 */

  /* -- service states -----------------------------------------------------
     Hues come from the TfL palette, then are lifted for legibility on a dark
     ground. Brand-exact values stay on the line bars, where nothing is read
     through them; text uses the lifted variant. */
  --good: #5bbd72;          /* Suffragette      7.1:1 on tunnel */
  --minor: #ffd300;         /* Circle           9.9:1 on tunnel-lift */
  --severe: #ff5347;        /* Central, lifted  4.6:1 on tunnel-lift */
  --closed: #a7b2b8;        /* corporate grey, lifted  7.5:1 on tunnel */

  /* -- departures -------------------------------------------------------- */
  --amber: #ffb000;         /* 11.5:1 on rail */
  --cancel: #ff5347;        /* 6.5:1 on rail */
  --plat-none-rule: #262626;
  --bar-outline: rgba(255, 255, 255, 0.92); /* edge for near-black line bars */
  --op-default: #869299;    /* operator with no brand colour on file */

  /* -- type ---------------------------------------------------------------
     Hammersmith One is Johnston-derived: the circular O and humanist
     proportions of the Underground's own face. Barlow Semi Condensed carries
     the data — condensed enough for long destination names, with real
     tabular figures. */
  --font-display: 'Hammersmith One', 'Gill Sans', 'Gill Sans MT', system-ui, sans-serif;
  --font-data: 'Barlow Semi Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* -- motion -------------------------------------------------------------
     Two movements only. The clock's colon is a step, not a fade, because that
     is what a station clock does. Anything too long for its box creeps
     sideways so it can be read in full; its duration is set per element from
     the measured distance, so everything moves at one speed. */
  --dur-tick: 2s;
  --step-tick: steps(1, end);
}