/* Every colour, size and space the product uses, once, with a dark set.
 *
 * Every surface imports this file, and no other stylesheet or script writes a colour of its
 * own: ratchets in harness.config.mjs refuse a hex colour anywhere else under public/ or
 * src/client/. ops/web-contrast.mjs measures every text and background pair the stylesheets use,
 * in both sets.
 *
 * The look (item 0.4 of the SneakyDan plan): the pages are slate and grey, a cool light ground
 * and a deep ink by day, a near-black slate by night, with one warm red for what to press. The
 * arena is a busy square in quiet mid tones, and the figures carry the strongest colour. The
 * display face is Fredoka (public/fonts/, under the SIL Open Font License in OFL.txt beside it),
 * for headings, buttons and the HUD; body text stays in the system face, which reads best small.
 */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* The ground, a raised surface (a button, a card, a panel), and a sunken one. */
  --paper: #eef1f4;
  --paper-2: #ffffff;
  --paper-3: #e3e8ee;
  --ink: #18202b;
  --ink-2: #323d4d;
  --muted: #586374;
  --line: #d2d9e2;
  /* The one edge every control and panel shares, and its hard shadow. */
  --edge: #18202b;
  --edge-shadow: #18202b;
  /* What to press, and the ink on it; a problem, the keyboard's ring, a warning, a good thing. */
  --accent: #d63a52;
  --accent-ink: #ffffff;
  /* The accent as words on the ground (a link, a step's number), dark enough to read. */
  --accent-text: #b8283f;
  --danger: #b42318;
  --focus: #2f6fd6;
  --warn: #9a4a00;
  --good: #1f7a4d;
  /* A chosen card's ground (the lobby's mode), and the ink on a good or a warning ground (a tag). */
  --accent-soft: #fbe3e7;
  --good-ink: #ffffff;
  --warn-ink: #ffffff;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --size-0: 0.875rem;
  --size-1: 1rem;
  --size-2: 1.25rem;
  --size-3: 1.75rem;
  --size-4: clamp(2rem, 10vw, 2.5rem);
  --size-5: clamp(2.5rem, 13vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --edge-1: 3px;
  --edge-2: 2px;

  --shadow: 0 4px 0 var(--edge-shadow);
  --shadow-pressed: 0 1px 0 var(--edge-shadow);

  --press: 3px;

  --measure: 38rem;
  /* The smallest thing a finger is asked to hit. */
  --tap: 3rem;

  /* The app's icon (scripts/pwa.mjs), drawn from the light set. */
  --icon-bg: #1f2833;
  --icon-floor: #d9ddd8;
  --icon-floor-2: #b9c0bb;
  --icon-joint: #a9b1ac;
  --icon-edge: #262a31;
  --icon-figure-1: #3f6fa8;
  --icon-figure-2: #d9a441;
  --icon-figure-3: #5b8c5a;
  --icon-hood: #d63a52;
  --icon-skin: #f2d0b1;
  --icon-skin-2: #c68b5f;
  --icon-light: #ffffff;

  /* The arena (src/client/arena/): the square by day, in quiet mid tones; the figures' edge,
     shadow and the reveal's dim; the eight player colours and the ink on each; the HUD strip.
     --sq-glow is how strongly a lamp glows, and --sq-dusk is 1 when the square is at dusk. */
  --sq-floor: #cfd4cf;
  --sq-floor-2: #c5cbc6;
  --sq-floor-3: #d9ddd8;
  --sq-joint: #a9b1ac;
  --sq-wall-a: #c08a72;
  --sq-wall-b: #dccfb2;
  --sq-wall-c: #93a7ab;
  --sq-window: #4f5d66;
  --sq-awning-a: #c9473f;
  --sq-awning-b: #f1ece2;
  --sq-wood: #8a6a4a;
  --sq-leaf: #6e9a5a;
  --sq-leaf-dark: #4f7444;
  --sq-water: #74aecb;
  --sq-stone: #e6e4de;
  --sq-stone-edge: #a39f96;
  --sq-lantern: #f5b544;
  --sq-glow: 0.14;
  --sq-dusk: 0;
  --fig-edge: #262a31;
  --fig-shadow: rgba(20, 28, 36, 0.24);
  --fig-dim: rgba(16, 20, 28, 0.5);
  --p1: #d63a52;
  --p2: #2f6fd6;
  --p3: #1f9a62;
  --p4: #c98a06;
  --p5: #8a4fd6;
  --p6: #d6611f;
  --p7: #127f8e;
  --p8: #c23b9a;
  --p1-ink: #ffffff;
  --p2-ink: #ffffff;
  --p3-ink: #14171f;
  --p4-ink: #14171f;
  --p5-ink: #ffffff;
  --p6-ink: #14171f;
  --p7-ink: #ffffff;
  --p8-ink: #ffffff;
  --hud-bg: #f2f4f5;
  --hud-ink: #18202b;
  /* The high street (--st-*) and the round's events (--fx-*): a balloon and its splash, smoke,
     a statue's flash, this phone's own touched statue, and the replay's markers. */
  --st-road: #8b9096;
  --st-road-2: #7f858c;
  --st-line: #eeeae0;
  --st-kerb: #b9b7b0;
  --st-check-a: #f4f1ea;
  --st-check-b: #2b2f36;
  --st-bin: #3f6a52;
  --fx-balloon: #3aa0e8;
  --fx-balloon-shine: #e8f6ff;
  --fx-splash: #5cc2f2;
  --fx-smoke: #d9dcdf;
  --fx-smoke-edge: #a9aeb4;
  --fx-flash: #fff1b8;
  --fx-own: #f5b544;
  --fx-mark: #ffffff;
  --fx-mark-ink: #1d2230;
  /* The pigeons (--pg-*): a grey bird, darker wings and head, a green sheen at the neck, coral
     feet and beak. */
  --pg-body: #9aa1ad;
  --pg-wing: #737b88;
  --pg-head: #4f5664;
  --pg-neck: #4f9a82;
  --pg-feet: #e07a5c;
  /* The crowd's clothes, skin and hair, the same in both themes: the looks in
     src/game/world/looks.js name them. */
  --coat-1: #c4553f;
  --coat-2: #3f6fa8;
  --coat-3: #5b8c5a;
  /* Steel, not the mustard it was: no coat in the crowd comes near a king's gold (--coat-12). */
  --coat-4: #5d7387;
  --coat-5: #7a5aa6;
  --coat-6: #2f8f8a;
  --coat-7: #e07b9a;
  --coat-8: #8a6f52;
  --coat-9: #ece7dc;
  --coat-10: #8e2f4f;
  /* A steward's hi-vis coat and a king's gold robe (D9 of the party features plan): never dealt
     to the townsfolk, and held apart from every other look colour by test/unit/looks.test.mjs. */
  --coat-11: #9ee03a;
  --coat-12: #e3a812;
  --trousers-1: #2d3442;
  --trousers-2: #4a5568;
  --trousers-3: #6b4f3a;
  --trousers-4: #23395b;
  --trousers-5: #5e5a52;
  --skin-1: #f2d0b1;
  --skin-2: #e0b08c;
  --skin-3: #c68b5f;
  --skin-4: #8d5a3b;
  --skin-5: #5c3a26;
  --hair-1: #2a211c;
  --hair-2: #5a3a22;
  --hair-3: #a8743a;
  --hair-4: #d8c08a;
  --hair-5: #8f8a86;
  /* Sneaky Dan (src/client/dan-art.js, public/home.css): his trench coat and its belt, his trilby,
     his trousers, and the guilty grin's teeth, the same in both themes, like the crowd's. */
  --dan-coat: #c49a5c;
  --dan-belt: #8f6d3e;
  --dan-hat: #34302c;
  --dan-trousers: #3b4250;
  --dan-teeth: #fbf8f1;
  --dan-band: #c9302c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11151c;
    --paper-2: #19202a;
    --paper-3: #141a22;
    --ink: #e7ebf1;
    --ink-2: #c3cad5;
    --muted: #9aa5b5;
    --line: #2b3442;
    --edge: #8a95a8;
    --edge-shadow: #05070a;
    --accent: #ff6b80;
    --accent-ink: #16090c;
    --accent-text: #ff6b80;
    --danger: #ff8f8f;
    --focus: #6ea2ff;
    --warn: #ffb057;
    --good: #4cc98a;
    --accent-soft: #3b1e26;
    --good-ink: #0b1a12;
    --warn-ink: #1f1300;

    /* The arena (src/client/arena/): the same square at dusk, its windows and lamps lit, and the
       player colours lightened for a dark ground. The crowd keeps its daytime clothes. */
    --sq-floor: #4a5160;
    --sq-floor-2: #444b59;
    --sq-floor-3: #525a6a;
    --sq-joint: #363c48;
    --sq-wall-a: #6e4c45;
    --sq-wall-b: #7f7667;
    --sq-wall-c: #4f5f68;
    --sq-window: #f2c46a;
    --sq-awning-a: #9a3a36;
    --sq-awning-b: #bdb6aa;
    --sq-wood: #5e4934;
    --sq-leaf: #4f7a48;
    --sq-leaf-dark: #36553a;
    --sq-water: #41738d;
    --sq-stone: #aeb2b9;
    --sq-stone-edge: #6f747d;
    --sq-lantern: #ffc861;
    --sq-glow: 0.28;
    --sq-dusk: 1;
    --fig-edge: #12151a;
    --fig-shadow: rgba(0, 0, 0, 0.4);
    --fig-dim: rgba(5, 8, 12, 0.58);
    --p1: #ff6b80;
    --p2: #6ea2ff;
    --p3: #4cc98a;
    --p4: #f2b636;
    --p5: #b78cff;
    --p6: #ff9150;
    --p7: #45c3d1;
    --p8: #f07ac8;
    --p1-ink: #14171f;
    --p2-ink: #14171f;
    --p3-ink: #14171f;
    --p4-ink: #14171f;
    --p5-ink: #14171f;
    --p6-ink: #14171f;
    --p7-ink: #14171f;
    --p8-ink: #14171f;
    --hud-bg: #161b24;
    --hud-ink: #e7ebf1;
    /* The high street and the events at dusk. */
    --st-road: #3a3f48;
    --st-road-2: #343941;
    --st-line: #c9c4b5;
    --st-kerb: #6d717a;
    --st-check-a: #c9c6bf;
    --st-check-b: #1a1d22;
    --st-bin: #2d4a3c;
    --fx-balloon: #4fb4f5;
    --fx-balloon-shine: #e8f6ff;
    --fx-splash: #6fcaf5;
    --fx-smoke: #9aa0a8;
    --fx-smoke-edge: #6b717a;
    --fx-flash: #fff1b8;
    --fx-own: #ffc861;
    --fx-mark: #e7ebf1;
    --fx-mark-ink: #12151a;
    --pg-body: #b4bac5;
    --pg-wing: #8a919e;
    --pg-head: #5f6675;
    --pg-neck: #66b39a;
    --pg-feet: #ec8b6d;
  }
}

:root[data-theme="dark"] {
  --paper: #11151c;
  --paper-2: #19202a;
  --paper-3: #141a22;
  --ink: #e7ebf1;
  --ink-2: #c3cad5;
  --muted: #9aa5b5;
  --line: #2b3442;
  --edge: #8a95a8;
  --edge-shadow: #05070a;
  --accent: #ff6b80;
  --accent-ink: #16090c;
  --accent-text: #ff6b80;
  --danger: #ff8f8f;
  --focus: #6ea2ff;
  --warn: #ffb057;
  --good: #4cc98a;
  --accent-soft: #3b1e26;
  --good-ink: #0b1a12;
  --warn-ink: #1f1300;

  /* The arena (src/client/arena/): the same square at dusk, its windows and lamps lit, and the
     player colours lightened for a dark ground. The crowd keeps its daytime clothes. */
  --sq-floor: #4a5160;
  --sq-floor-2: #444b59;
  --sq-floor-3: #525a6a;
  --sq-joint: #363c48;
  --sq-wall-a: #6e4c45;
  --sq-wall-b: #7f7667;
  --sq-wall-c: #4f5f68;
  --sq-window: #f2c46a;
  --sq-awning-a: #9a3a36;
  --sq-awning-b: #bdb6aa;
  --sq-wood: #5e4934;
  --sq-leaf: #4f7a48;
  --sq-leaf-dark: #36553a;
  --sq-water: #41738d;
  --sq-stone: #aeb2b9;
  --sq-stone-edge: #6f747d;
  --sq-lantern: #ffc861;
  --sq-glow: 0.28;
  --sq-dusk: 1;
  --fig-edge: #12151a;
  --fig-shadow: rgba(0, 0, 0, 0.4);
  --fig-dim: rgba(5, 8, 12, 0.58);
  --p1: #ff6b80;
  --p2: #6ea2ff;
  --p3: #4cc98a;
  --p4: #f2b636;
  --p5: #b78cff;
  --p6: #ff9150;
  --p7: #45c3d1;
  --p8: #f07ac8;
  --p1-ink: #14171f;
  --p2-ink: #14171f;
  --p3-ink: #14171f;
  --p4-ink: #14171f;
  --p5-ink: #14171f;
  --p6-ink: #14171f;
  --p7-ink: #14171f;
  --p8-ink: #14171f;
  --hud-bg: #161b24;
  --hud-ink: #e7ebf1;
  /* The high street and the events at dusk. */
  --st-road: #3a3f48;
  --st-road-2: #343941;
  --st-line: #c9c4b5;
  --st-kerb: #6d717a;
  --st-check-a: #c9c6bf;
  --st-check-b: #1a1d22;
  --st-bin: #2d4a3c;
  --fx-balloon: #4fb4f5;
  --fx-balloon-shine: #e8f6ff;
  --fx-splash: #6fcaf5;
  --fx-smoke: #9aa0a8;
  --fx-smoke-edge: #6b717a;
  --fx-flash: #fff1b8;
  --fx-own: #ffc861;
  --fx-mark: #e7ebf1;
  --fx-mark-ink: #12151a;
  --pg-body: #b4bac5;
  --pg-wing: #8a919e;
  --pg-head: #5f6675;
  --pg-neck: #66b39a;
  --pg-feet: #ec8b6d;
}