/* Shared design tokens for trackway-live.html, status.html, and home.html.
   Union of every token used by any of the three pages - not every page
   references every one of these (e.g. only trackway-live.html uses
   --color-border-soft/--color-ink-rgb, only status.html uses
   --color-status-delayed-rgb/--color-status-cancelled-rgb), but keeping
   one shared set means a new page doesn't need to re-derive which rgb
   triplets it needs before it can use them.

   Also carries the one genuinely shared *component* in the app — the
   National Rail attribution (`.nre-attribution`, at the end of this
   file) — reused verbatim by every page that shows National Rail-derived
   train information, rather than duplicated into each page's own
   <style>. Every page already links this stylesheet. */
:root{
  /* brand palette */
  --color-ink:#1C1E22;
  --color-status-ontime:#16A34A;
  --color-status-delayed:#F59E0B;
  --color-status-cancelled:#EF4444;

  /* rgb triplets of the above, for alpha-blended glows/backdrops/fills -
     rgba() can't take a hex custom property directly. */
  --color-ink-rgb:28,30,34;
  --color-status-ontime-rgb:22,163,74;
  --color-status-delayed-rgb:245,158,11;
  --color-status-cancelled-rgb:239,68,68;

  /* Trackway brand identity (2026 rebrand) - petrol/teal, distinct from
     the on-time/delay/cancelled status colours above on purpose: those
     describe live railway state, these describe the brand itself. Never
     repurpose one set for the other's role, even where a colour might
     look like it could double up (e.g. teal-accent is not a stand-in for
     status-ontime just because both read as green/teal-ish). --color-ink
     deliberately not added here despite being part of the brand palette
     spec (#111B27) - the existing --color-ink (#1C1E22, unrelated
     original value) is used as body text colour on every page already;
     changing it would be a real, visible, app-wide text-colour change,
     not the token-only groundwork this phase is meant to be. The brand
     pack's Ink value is already baked into the SVG assets directly, so
     nothing here depends on this token existing.

     --color-accent (the pre-rebrand teal, #0E7C7B) is gone as of Phase 2 -
     every usage was general brand-accent UI chrome (focus rings, active
     tab fill/underline, selected-row tint, sparkline stroke, timeline
     current-stop badge, one label, one decorative SVG stroke), not status
     colour, so it's consolidated into --color-teal-accent rather than
     kept as a second, separately-drifting brand-teal token. The one
     exception - trackway-live.html's "SCHEDULED" departure-row label,
     which used --color-accent as a fourth pseudo-status colour - was
     deliberately NOT migrated to --color-teal-accent; it now uses
     --color-text-dim instead, matching its sibling "PLANNED" state,
     since letting a genuinely brand-identity colour double as live
     railway status is exactly the collision this section warns against. */
  --color-petrol:#0D3B3E;
  --color-teal-accent:#1DB4A6;
  --color-teal-accent-rgb:29,180,166;

  /* --color-paper is the page background everywhere now - Phase 3
     consolidated the old --color-bg (#F7F8FA) into this, same reasoning
     as the --color-accent consolidation above: these were the same
     colour in intent (page background) and close enough in value
     (#F7F8FA vs #F6F8F9) that keeping both as separately-drifting
     tokens served no purpose. The manifest's background_color (neither
     it nor theme-color/meta tags can reference a CSS custom property)
     was updated to this exact hex too, since that's specifically the
     PWA splash-screen colour and should match what the page actually
     looks like once it renders. theme-color (both the 5 meta tags and
     the manifest's own theme_color) is NOT --color-paper though - once
     every page had a petrol header (Phase 2), that's what represents the
     page for OS-level chrome (the browser toolbar/status-bar tint), not
     the body background sitting below it - those all use --color-petrol
     (#0D3B3E) instead, added after the fact once this was actually
     checked and flagged, not assumed at Phase 3 implementation time. */
  --color-paper:#F6F8F9;

  /* The exact gradient trackway-navbar-lockup-outlined.svg itself uses
     (its own <linearGradient>, stops read directly from that file) - for
     the header/navbar bar's CSS background specifically. Deliberately a
     gradient, not flat --color-petrol - confirmed as a real design
     decision, not a placeholder, before Phase 2 implementation. Kept as
     two separate stop tokens rather than one token holding the whole
     gradient() value, matching how every other multi-colour gradient in
     this app is already composed inline at its usage site (see e.g. the
     old --color-accent/--color-status-ontime brand-mark badge gradient
     this replaces). --color-petrol-gradient-end (#08282A) is also the
     specific "darker corner" value called out when checking teal-accent
     contrast against this gradient - not a coincidence, the header's own
     worst-case contrast corner is exactly this stop. */
  --color-petrol-gradient-start:#0E4950;
  --color-petrol-gradient-end:#08282A;

  /* Neutrals for the light surface - not part of the original brand
     palette, chosen to sit comfortably between --color-paper and
     --color-ink for panels/borders/secondary text. */
  --color-surface:#FFFFFF;
  --color-surface-2:#EEF0F3;
  --color-border:#DDE1E6;
  --color-border-soft:#E8EAED;
  --color-text-soft:#4B5158;
  --color-text-dim:#868D96;
  --color-on-accent:#FFFFFF;
}

/* National Rail attribution — one shared treatment, reused verbatim by
   board.html, train.html and train-detail.html (directly under the
   National Rail-derived board / journey / timetable information) and by
   home.html's footer (the site's data-source credit). Required by the
   NRE Developer Guidelines wherever a National Rail feed is the
   predominant content of a screen.

   Deliberately small, centred and low-contrast so it never competes with
   service information, but stays legible. The supplied official asset
   (/static/NRE_Powered_logo.jpg) is used exactly as given — never
   recoloured, cropped, stretched or re-drawn. It carries its own baked
   white background, so it sits on a small white plate whose padding
   preserves the mark's clear space; the web app is light-only, so no
   dark variant is needed. The <img> also carries width/height
   attributes matching the asset's intrinsic 2362×479 ratio, so its box
   is reserved before the file loads (no layout shift), while this rule
   sizes it for display without distorting it. */
.nre-attribution{
  display:flex;justify-content:center;
  margin:18px 0 6px 0;
}
.nre-attribution a{
  display:inline-block;line-height:0;
  padding:5px 9px;border-radius:6px;
  background:#FFFFFF;border:1px solid var(--color-border-soft);
}
.nre-attribution a:focus-visible{
  outline:2px solid var(--color-petrol);outline-offset:2px;
}
.nre-attribution img{
  display:block;
  width:132px;height:auto;
}