/* The one palette both pages draw from.
 *
 * style.css and admin/style.css each carried their own copy of this block, byte-identical
 * apart from --danger, which only the admin panel had declared. Two copies of a palette is
 * one colour changed in the wrong file away from the calendar and the panel disagreeing about
 * what "surface" means -- and nothing would have failed to say so.
 *
 * Served by the existing static route: add_static("/static/", STATIC_DIR) in server.py already
 * covers this file and everything under static/admin/, so linking it needed no routing change.
 * Both pages load it before their own stylesheet.
 */

:root {
  --bg: #0e0f10;
  --surface: #18191b;
  --surface-2: #212327;
  --border: rgba(255, 255, 255, 0.07);
  --text: #f2f2f2;
  --text-dim: #9a9ca3;
  --accent: #d4f56a;
  --accent-text: #14150f;
  /* Was declared only in the admin panel. The calendar reaches for the same red in two places
     (#sheet-actions .danger, #sheet-error) and had it hard-coded as #ff8f8f -- a lighter shade
     of the same intent, arrived at separately. Left as-is there for now: unifying them is a
     visual change to the calendar, not a deduplication. */
  --danger: #ff6b6b;

  /* ── Три роли цвета ─────────────────────────────────────────────────────────────────────
   *
   * The panel had one accent doing five jobs at once: the focus ring, the border on "someone
   * is waiting", the 80%-full warning, the "pending" status word, and the stroke of all four
   * history graphs. A colour that means five things means none of them -- an amber disk and a
   * tappable button were the same shade of lime, and the only way to tell them apart was to
   * read the text, which is exactly what the colour was supposed to save you from.
   *
   * So each family gets one job and never borrows another's:
   *
   *   --accent          interactive. Buttons, the selected tab, the focus ring. Never data,
   *                     never state. (Unchanged hex -- this is the panel's own colour.)
   *   --series-1..3     data. Categorical slots for chart series, assigned in fixed order and
   *                     never cycled; a fourth series folds into "прочее" instead.
   *   --ok/--warn/--danger   state. The traffic light, and only that.
   *
   * The series slots were validated against --surface-2 (#212327), the surface every chart in
   * the panel actually sits on: all three pairs clear the CVD separation floor (worst 9.4 ΔE
   * deuteranopia), the normal-vision floor (worst 20.9) and 3:1 contrast. Ordering is part of
   * that result, not decoration -- reordering them is a change to re-check, not a preference.
   *
   * --ok against --danger is the one pair that does NOT separate: green and red measure 4.1 ΔE
   * under deuteranopia, which is to say they are the same colour to roughly one man in twelve.
   * That is why every state marker in the panel carries a glyph and a word beside the colour
   * (app.js: HEALTH_GLYPH, usageNote) and why none of them may ever stop doing so.
   *
   * Only the admin panel draws charts today, so only it reads --series-*. They live here
   * anyway, for the reason stated at the top of this file: one palette, one place.
   */
  --ok: #0ca30c;
  --warn: #fab219;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  /* Hairline behind the plot area -- present enough to read a level against, quiet enough that
     the line stays the loudest thing in the box. */
  --grid: #2c2c2a;

  /* The two faces every page here draws from, named for the same reason the palette above is:
   * style.css and admin/style.css would otherwise each carry their own font stack, and a face
   * changed in one of them is a face the other page keeps.
   *
   * Inter Tight carries the interface -- headings, labels, buttons, running text. JetBrains
   * Mono is for figures that line up in a column and for technical strings read character by
   * character: telegram ids, times, day numbers, table counts. Everything else stays sans;
   * a monospace paragraph is harder to read, not more precise.
   *
   * Both stacks name real fallbacks on purpose: the faces come off fonts.googleapis.com (see
   * the <link> in each page's head), and a phone that cannot reach it must still lay the page
   * out in something sane rather than in whatever the browser defaults to.
   */
  --font-sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}