/**
 * Every colour the 274 transect video draws, named by what it is for rather than
 * what it looks like. Change values here, or override `palette` in the Studio's
 * input props, without touching the drawing code.
 *
 * The dark palette is the video's own, grown from the dark palette of
 * `song-274/route/274-transect.html`; comments name the page's CSS variable each
 * token corresponds to. The light palette is the page's, extended with the
 * tokens the video added (shrine, railway).
 */
export type TransectPalette = {
  /** Frame background. */
  background: string;
  /** The whole road, before the song has covered it. */
  roadAhead: string;
  /** The road the song has covered so far. */
  roadCovered: string;
  /** Node fill per feature family, as on the page's legend. */
  bridge: string;
  tunnel: string;
  shed: string;
  watercourse: string;
  place: string;
  /** Stations and every 信号場, whatever their roster kind. */
  railway: string;
  shrine: string;
  other: string;
};

export type FeatureFamily =
  | "bridge"
  | "tunnel"
  | "shed"
  | "watercourse"
  | "place"
  | "railway"
  | "shrine"
  | "other";

export const darkPalette: TransectPalette = {
  background: "#28323d", // --paper
  roadAhead: "#49565f", // --rule
  roadCovered: "#fdb021", // --road
  bridge: "#9be9de", // --bridge
  tunnel: "#a6ccc2", // --tunnel
  shed: "#eba9eb", // --shed
  watercourse: "#5FB6D6", // --water
  place: "#68ad7f", // --place
  railway: "#68ad7f", // --railway
  shrine: "#b94141", // --shrine
  other: "#8b9ab8", // --util
};

export const lightPalette: TransectPalette = {
  background: "#E7ECEE",
  roadAhead: "#C0CCD2",
  roadCovered: "#2E4A5A",
  bridge: "#116B62",
  tunnel: "#3A4650",
  shed: "#7A5AA6",
  watercourse: "#2F7E9E",
  place: "#8A6D1F",
  railway: "#1F6E43",
  shrine: "#9B2C2C",
  other: "#5B6B75",
};