/* ==================================================
   themes.css — alternative looks (kept in reserve)
   --------------------------------------------------
   The game's look is Paper: the token block at the top of styles.css
   (owner, 2026-11-02). The old charcoal theme was removed then. The three
   themes below are kept in case the owner changes their mind; each only
   redefines tokens, and applies when <html> has data-theme="transit",
   "nordic" or "blueprint" (there is no picker any more: edit the
   attribute in index.html and about.html).

   Rules every theme follows:
   - The two street colours (--map-street-1/2) stay distinguishable from
     each other for colour-blind players (a blue paired with an orange,
     or yellow paired with pink, which also differ a lot in lightness),
     and stand out from the map.
   - Text meets WCAG AA contrast (4.5:1) on its background.
   - Green (--color-success) means correct and nothing else.

   Fonts: only Paper's fonts are self-hosted (fonts/). These themes name
   Barlow, Manrope and IBM Plex, which would fall back to system fonts
   until their files are added to fonts/ and css/fonts.css. Their
   contrast was not re-checked on 2026-11-02 (scripts/check_contrast.mjs
   checks the default theme).
================================================== */

/* ==================================================
   Transit: a bold metro diagram
   White and light grey, a black header, heavy condensed capitals,
   strong primary colours, thick black outlines and hard offset shadows,
   pill-shaped buttons and rows like line badges. Grey map, so the
   coloured lines pop.
================================================== */

html[data-theme="transit"] {
  --color-text: #111111;
  --color-text-secondary: #2e2e2e;
  --color-text-muted: #595959;
  --color-text-faint: #9a9a9a;

  --color-page-bg: #e4e7eb;
  --color-page-bg-top: #e4e7eb;
  --color-card-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-sunken: #f3f4f6;
  --color-border: #111111;
  --color-row-border: #cfd4da;
  --color-placeholder: #c2c7cd;
  --color-divider: rgba(0, 0, 0, 0.14);
  --color-overlay: rgba(17, 17, 17, 0.45);

  --color-button-border: #111111;
  --color-button-hover: #eceff3;
  --color-accent: #0039a6;
  --color-accent-hover: #002a7a;
  --color-on-accent: #ffffff;
  --color-accent-tint: rgba(0, 57, 166, 0.08);
  --color-accent-tint-strong: rgba(0, 57, 166, 0.12);
  --color-accent-border-soft: rgba(0, 57, 166, 0.6);
  --color-direction-arrow: #0039a6;
  --color-toggle-off: #8d949c;
  --color-toggle-knob: #ffffff;
  --color-bar: #d3d8de;

  --color-success: #00843d;
  --color-success-text: #00703c;
  --color-success-tint: rgba(0, 132, 61, 0.12);
  --color-success-border: rgba(0, 132, 61, 0.7);
  --color-danger: #dc241f;

  --color-marker-fill: #111111;
  --color-marker-outline: #ffffff;
  --color-marker-text: #ffffff;
  --color-marker-text-dark: #111111;
  --color-band-near: #ffd200;
  --color-band-mid: #f58220;
  --color-band-far: #dc241f;
  --color-band-near-text: #111111;
  --color-band-mid-text: #111111;
  --color-band-far-text: #ffffff;
  --color-marker-text-success: #ffffff;
  --color-pending-fill: rgba(17, 17, 17, 0.45);
  --color-pending-glow: rgba(0, 57, 166, 0.35);

  /* Strong blue and orange: colour-blind safe, loud on a grey map */
  --map-street-1: #0039a6;
  --map-street-2: #f58220;
  --map-area-hint: #9b0058;
  --map-district: #8b5a2b;
  --map-connector: #111111;
  --map-dot-fill: #ffffff;
  --map-dot-outline: #111111;
  --map-preview-fill: #111111;
  --map-preview-outline: #ffffff;
  --map-solution-stroke: #00843d;
  --map-solution-fill: #00a650;
  --map-outside-stroke: #111111;
  --map-outside-opacity: 0.7;

  /* Basemap (vector map) colours */
  --basemap-land: #eeeeee;
  --basemap-water: #c9d6df;
  --basemap-park: #dfe5da;
  --basemap-wood: #d5dccf;
  --basemap-plaza: #e6e6e6;
  --basemap-building: #d9d9d9;
  --basemap-road-casing: #cfcfcf;
  --basemap-road-minor: #ffffff;
  --basemap-road-major: #ffffff;
  --basemap-path: #c4c4c4;
  --basemap-rail: #6b6b6b;
  --basemap-label: #111111;
  --basemap-label-halo: #ffffff;
  --basemap-water-label: #3b5566;
  --basemap-park-label: #4b5a44;

  --border-width-card: 3px;

  --font-body: "Barlow", system-ui, sans-serif;
  --font-heading: "Barlow Condensed", "Barlow", sans-serif;
  --font-title: "Barlow Condensed", "Barlow", sans-serif;
  --font-marker: "Barlow Condensed", "Barlow", sans-serif;
  --font-control: "Barlow", system-ui, sans-serif;
  --title-size: 1.8rem;
  --title-weight: 800;
  --title-letter-spacing: 0.04em;
  --title-transform: uppercase;

  --radius-card: 0;
  --radius-map: 0;
  --radius-panel: 999px;
  --radius-control: 999px;
  --radius-bar: 999px;
  --radius-pill: 999px;
  --radius-marker: 50%;

  /* Hard offset shadows, like a printed poster */
  --shadow-card: 8px 8px 0 #111111;
  --shadow-modal: 10px 10px 0 #111111;
  --shadow-floating: 5px 5px 0 #111111;
  --shadow-marker: 0 0 0 2px #111111;
}

/* The header is a black band with white text. Custom properties can be
   redefined for one part of the page: everything inside the header uses
   these values instead. */
html[data-theme="transit"] .app-header {
  --color-surface: #111111;
  --color-text: #ffffff;
  --color-text-secondary: #e6e6e6;
  --color-text-muted: #bdbdbd;
  --color-button-border: #ffffff;
  --color-button-hover: #2b2b2b;
  --color-accent: #ffd200;
  --color-accent-tint-strong: rgba(255, 210, 0, 0.2);
}


/* ==================================================
   Nordic: minimal and calm
   Cool off-white, hairlines instead of shadows, a light geometric
   sans-serif with a spaced lowercase title, muted denim and rust,
   white markers, an almost grey map.
================================================== */

html[data-theme="nordic"] {
  --color-text: #1f2328;
  --color-text-secondary: #3b4148;
  --color-text-muted: #5f6770;
  --color-text-faint: #a2a8af;

  --color-page-bg: #f3f2ee;
  --color-page-bg-top: #f3f2ee;
  --color-card-bg: #fbfbf9;
  --color-surface: #fbfbf9;
  --color-surface-sunken: #f1f0ec;
  --color-border: #e0ddd6;
  --color-row-border: #e6e3dc;
  --color-placeholder: #d3cfc7;
  --color-divider: rgba(0, 0, 0, 0.07);
  --color-overlay: rgba(243, 242, 238, 0.65); /* a light veil, not a dark one */

  --color-button-border: #d6d2ca;
  --color-button-hover: #efeee9;
  --color-accent: #3f5f73;
  --color-accent-hover: #314b5b;
  --color-on-accent: #ffffff;
  --color-accent-tint: rgba(63, 95, 115, 0.08);
  --color-accent-tint-strong: rgba(63, 95, 115, 0.12);
  --color-accent-border-soft: rgba(63, 95, 115, 0.45);
  --color-direction-arrow: #3f5f73;
  --color-toggle-off: #cdc9c0;
  --color-toggle-knob: #ffffff;
  --color-bar: #e5e2db;

  --color-success: #2f7d4f;
  --color-success-text: #2a6f46;
  --color-success-tint: rgba(47, 125, 79, 0.1);
  --color-success-border: rgba(47, 125, 79, 0.45);
  --color-danger: #b8432f;

  /* White markers with dark numbers */
  --color-marker-fill: #ffffff;
  --color-marker-outline: #1f2328;
  --color-marker-text: #1f2328;
  --color-marker-text-dark: #1f2328;
  --color-band-near: #ecc76b;
  --color-band-mid: #e5944c;
  --color-band-far: #dc6e55;
  --color-band-near-text: #1f2328;
  --color-band-mid-text: #1f2328;
  --color-band-far-text: #1f2328;
  --color-marker-text-success: #ffffff;
  --color-pending-fill: rgba(255, 255, 255, 0.6);
  --color-pending-glow: rgba(31, 35, 40, 0.25);

  /* Denim and rust: muted, but still a blue/orange pair */
  --map-street-1: #2e6fba;
  --map-street-2: #d9762b;
  --map-area-hint: #7a5aa6;
  --map-district: #a8456b;
  --map-connector: #1f2328;
  --map-dot-fill: #ffffff;
  --map-dot-outline: #1f2328;
  --map-preview-fill: #1f2328;
  --map-preview-outline: #ffffff;
  --map-solution-stroke: #2f7d4f;
  --map-solution-fill: #5bbf7f;
  --map-outside-stroke: #5f6770;
  --map-outside-opacity: 0.7;

  /* Basemap (vector map) colours */
  --basemap-land: #f1f0ec;
  --basemap-water: #cdd9e0;
  --basemap-park: #dde3d6;
  --basemap-wood: #d3dbcc;
  --basemap-plaza: #e9e7e1;
  --basemap-building: #e0ddd6;
  --basemap-road-casing: #d8d5cd;
  --basemap-road-minor: #fbfbf9;
  --basemap-road-major: #ffffff;
  --basemap-path: #cfcbc2;
  --basemap-rail: #8a9096;
  --basemap-label: #1f2328;
  --basemap-label-halo: #fbfbf9;
  --basemap-water-label: #3f5f73;
  --basemap-park-label: #4f6448;

  --border-width-card: 1px;

  --font-body: "Manrope", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-title: "Manrope", system-ui, sans-serif;
  --font-marker: "Manrope", system-ui, sans-serif;
  --font-control: "Manrope", system-ui, sans-serif;
  --title-size: 1.3rem;
  --title-weight: 300;
  --title-letter-spacing: 0.35em;
  --title-transform: lowercase;

  --radius-card: 2px;
  --radius-map: 2px;
  --radius-panel: 2px;
  --radius-control: 2px;
  --radius-bar: 1px;
  --radius-pill: 20px;
  --radius-marker: 50%;

  --shadow-card: none;
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-marker: 0 1px 3px rgba(0, 0, 0, 0.3);
}


/* ==================================================
   Blueprint (wildcard): a surveyor's drawing
   Deep blueprint blue with a faint grid, light-blue lines, a monospace
   for the title and headings, square corners, yellow highlighter as the
   accent, and the map turned into a blue negative. Streets in yellow and
   pink, which differ strongly in lightness as well as hue.
================================================== */

html[data-theme="blueprint"] {
  --color-text: #e8f1ff;
  --color-text-secondary: #c6d8f2;
  --color-text-muted: #9dbbe0;
  --color-text-faint: #6286b5;

  --color-page-bg: #0a2747;
  --color-page-bg-top: #0e335c;
  --color-card-bg: #0c2d52;
  --color-surface: #0a2848;
  --color-surface-sunken: #092341;
  --color-border: #3d6ea5;
  --color-row-border: #2b5687;
  --color-placeholder: #2f5b8c;
  --color-divider: rgba(173, 205, 255, 0.18);
  --color-overlay: rgba(4, 16, 32, 0.55);

  --color-button-border: #5b8bc4;
  --color-button-hover: #12406f;
  --color-accent: #ffd43b;
  --color-accent-hover: #fcc419;
  --color-on-accent: #0a2747;
  --color-accent-tint: rgba(255, 212, 59, 0.10);
  --color-accent-tint-strong: rgba(255, 212, 59, 0.16);
  --color-accent-border-soft: rgba(255, 212, 59, 0.6);
  --color-direction-arrow: #ffd43b;
  --color-toggle-off: #2f5b8c;
  --color-toggle-knob: #e8f1ff;
  --color-bar: #2b5687;

  --color-success: #37b24d;
  --color-success-text: #69db7c;
  --color-success-tint: rgba(55, 178, 77, 0.18);
  --color-success-border: rgba(105, 219, 124, 0.7);
  --color-danger: #ff6b6b;

  --color-marker-fill: #0a2747;
  --color-marker-outline: #e8f1ff;
  --color-marker-text: #e8f1ff;
  --color-marker-text-dark: #0a2747;
  --color-band-near: #ffd43b;
  --color-band-mid: #ff922b;
  --color-band-far: #ff6b6b;
  --color-band-near-text: #0a2747;
  --color-band-mid-text: #0a2747;
  --color-band-far-text: #0a2747;
  --color-marker-text-success: #0a2747; /* dark numbers on the bright green */
  --color-pending-fill: rgba(10, 39, 71, 0.55);
  --color-pending-glow: rgba(255, 212, 59, 0.4);

  --map-street-1: #ffd43b;
  --map-street-2: #ff5fa2;
  --map-area-hint: #ffffff;
  --map-district: #b197fc;
  --map-connector: #e8f1ff;
  --map-dot-fill: #0a2747;
  --map-dot-outline: #e8f1ff;
  --map-preview-fill: #e8f1ff;
  --map-preview-outline: #0a2747;
  --map-solution-stroke: #69db7c;
  --map-solution-fill: #69db7c;
  --map-outside-stroke: #9dbbe0;
  --map-outside-opacity: 0.62;

  /* Basemap (vector map) colours */
  --basemap-land: #0d2f55;
  --basemap-water: #082040;
  --basemap-park: #123f5e;
  --basemap-wood: #133f5a;
  --basemap-plaza: #103660;
  --basemap-building: #133a63;
  --basemap-road-casing: #0a2747;
  --basemap-road-minor: #2d5788;
  --basemap-road-major: #4a78ad;
  --basemap-path: #23497a;
  --basemap-rail: #9dbbe0;
  --basemap-label: #e8f1ff;
  --basemap-label-halo: #0a2747;
  --basemap-water-label: #7fa8d8;
  --basemap-park-label: #9dd0b8;

  /* Faint grid lines every 28 px, in both directions */
  --page-pattern:
    linear-gradient(rgba(157, 187, 224, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(157, 187, 224, 0.07) 1px, transparent 1px) 0 0 / 28px 28px;
  /* Grey, then inverted (light roads on dark), then tinted blue */
  --border-width-card: 1px;

  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-heading: "IBM Plex Mono", ui-monospace, monospace;
  --font-title: "IBM Plex Mono", ui-monospace, monospace;
  --font-marker: "IBM Plex Mono", ui-monospace, monospace;
  --font-control: "IBM Plex Sans", system-ui, sans-serif;
  --title-size: 1.25rem;
  --title-weight: 600;
  --title-letter-spacing: 0.2em;
  --title-transform: uppercase;

  --radius-card: 0;
  --radius-map: 0;
  --radius-panel: 0;
  --radius-control: 0;
  --radius-bar: 0;
  --radius-pill: 2px;
  --radius-marker: 50%;

  --shadow-card: 0 0 0 1px rgba(157, 187, 224, 0.15), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 0 0 1px #5b8bc4, 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-marker: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
}