/* Generated by bin/day-tokens.mjs from design/day-tokens.json. Do not edit.

   Dark, for his own signed-in pages only. Loaded after app.css, which stays
   the light skin the partner pages wear. The same colours are on his wrist
   and on the TRMNL, so the band reads the same on all three. */

:root, :root[data-theme] {
  color-scheme: dark;
  --bg: #0A0B0D;
  --band: #101215;
  --panel: #15181C;
  --panel-2: #1B1F24;
  --hairline: #23282F;
  --line: #2A3038;
  --line-strong: #3D4550;
  --input-line: #333A43;
  --track: #1A1F2B;
  --text: #EDF0F2;
  --muted: #A3ACB5;
  --faint: #8A93A6;
  --placeholder: #6E7781;
  --accent: #1F6FEB;
  --accent-hover: #3A82F0;
  --accent-text: #74AAF2;
  --ok-line: #234A33;
  --ok-bg: #13241A;
  --ok-text: #7BC79A;
  --warn-line: #4A3A12;
  --warn-bg: #241D0C;
  --warn-text: #E8C25E;
  --err-line: #5A2A22;
  --err-bg: #2A1512;
  --err-text: #E0A597;
  --c-day: #1F6FEB;
  --c-wake: #8A93A6;
  --c-pills: #F8E71C;
  --c-walk: #2ECC71;
  --c-run: #2ECC71;
  --c-meal: #F5A623;
  --c-sleep: #7B6CF6;
  /* The page names a few of these differently. */
  --panel-2: var(--panel2);
  --c-track: var(--track);
  --header-bg: rgba(10, 11, 13, 0.9);
  --accent-ink: #FFFFFF;
  --accent-text-hover: #97C1F7;
  --joint-line: #4A3A12; --joint-bg: #241D0C; --joint-text: #E8C25E;
}

html, body { background: var(--bg); color: var(--text); }

/* app.css hard-codes a few light values; these put them back on the palette. */
.tabs a[aria-current="page"] { background: var(--panel2); color: var(--text); }
.btn { background: var(--text); color: var(--bg); }
.btn:hover { background: #FFFFFF; }
.now .btn { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.now .btn:hover { background: var(--accent-hover); }

/* Folk: "selected" is the text colour as a fill, so its own text has to flip. */
.item:hover { background: var(--panel2); }
.item[aria-selected="true"], .talk, .seg button[aria-pressed="true"] { color: var(--bg); }
.item[aria-selected="true"] .sub, .item[aria-selected="true"] .ago { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.item[aria-selected="true"] .av { background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); }
.item[aria-selected="true"] .star { color: #B8860B; }