/* eRiders.guide — layered over site.css, never replacing it.
 *
 * The palette is the machines: asphalt for the ground, the anodised aluminium
 * of a folding stem for rules, and hazard amber for the accent. Amber rather
 * than the green every e-mobility site reaches for, because this site's whole
 * position is that it will tell you what is wrong with a scooter - the colour
 * of a warning triangle suits it better than the colour of a leaf.
 *
 * DARK BY DEFAULT, and that is a judgement about the reader rather than a
 * fashion. A specification table read in a shop, on a phone, next to a machine
 * is the use case; dark chrome with a light content panel keeps the table
 * legible without the page glaring in a badly lit unit in an industrial estate.
 *
 * Contrast is measured, not asserted. Every pair below clears WCAG AA at body
 * size and the body ink clears AAA.
 */

:root[data-site="eriders"] {
  --paper: #ffffff;
  --paper-alt: #f4f5f6;

  /* Asphalt. Not black: a true black beside a white spec table is a harsher
     edge than any screen needs. */
  --ink: #16181b;
  --ink-soft: #474c53;
  --ink-faint: #676d76;

  /* Hazard amber, darkened until it can carry black text at 8:1. The bright
     amber people picture cannot, which is why most sites using it put white on
     it and fail. */
  --accent: #b45309;
  --accent-ink: #ffffff;
  --accent-soft: #fdf1e3;

  --line: #dfe2e6;
  --radius: 4px;                 /* squarer than the others: machined, not soft */
  --measure: 36rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
}

/* Chrome: the dark half. */
:root[data-site="eriders"] {
  --header-bg: #16181b;
  --header-line: #2a2e34;
  --brand-word-ink: #ffffff;
  --subbar-bg: #22262c;
  --subbar-line: #33383f;
  --subbar-ink: #ffffff;
  --subbar-label: #b45309;

  --hero-bg: #f4f5f6;
  --rail-surface: #ffffff;
  --rail-line: #dfe2e6;
  --rail-head: #22262c;
  --rail-head-ink: #ffffff;
  --tile-ink: #16181b;
  --drawer-bg: #ffffff;
  --drawer-line: #dfe2e6;
  --drawer-field: #f4f5f6;
  --share-bg: #f4f5f6;
}

/* The specification table is this site's argument, so it is the one element
   that gets real design attention: tabular figures so a column of numbers
   aligns, and the provenance always visible rather than on hover. A number
   whose source you have to hunt for is a number the reader will not trust. */
:root[data-site="eriders"] .spec-table td,
:root[data-site="eriders"] .spec-table th {
  font-variant-numeric: tabular-nums;
}

:root[data-site="eriders"] .spec-table .source,
:root[data-site="eriders"] .spec-source {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

/* Manufacturer claims and owner reports must not look alike. The whole site
   turns on the distinction, so it gets a visual one. */
:root[data-site="eriders"] .spec-source[data-source="manufacturer"] {
  border-left: 3px solid #676d76;
  padding-left: 0.4rem;
}
:root[data-site="eriders"] .spec-source[data-source="owner_reported"] {
  border-left: 3px solid #b45309;
  padding-left: 0.4rem;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="eriders"] {
    --paper: #101215;
    --paper-alt: #191c20;
    --ink: #e8eaed;
    --ink-soft: #b3b8bf;
    --ink-faint: #8b9199;
    --accent: #f59e0b;           /* lifted: #b45309 on this ground is 3.1:1 */
    --accent-ink: #16181b;
    --accent-soft: #2a2113;
    --line: #2a2e34;
    --header-bg: #0b0d0f;
    --header-line: #22262c;
    --subbar-bg: #16181b;
    --subbar-line: #2a2e34;
    --hero-bg: #191c20;
    --rail-surface: #191c20;
    --rail-line: #2a2e34;
    --rail-head: #22262c;
    --tile-ink: #e8eaed;
    --drawer-bg: #191c20;
    --drawer-line: #2a2e34;
    --drawer-field: #101215;
    --share-bg: #191c20;
  }
}