/* anewera dashboard, dark (31 October 2026). Loaded after app.css by ThemeHead.astro: always when
   the person chose dark, with media="(prefers-color-scheme: dark)" when they left it to the device
   (server/theme.ts). It redefines app.css's tokens, nothing else but the few rules whose light
   values cannot come from a token.

   Warm charcoal, not black: the page, the sidebar a step below it, panels a step above, menus above
   those; hairlines instead of shadows, which hardly show on dark. Warm light text. Orange is the
   accent (buttons, the current page, highlights, focus), lightened where it is text. Green and red
   mean better and worse only. Every text colour reaches WCAG AA on every surface it sits on
   (src/components/theme-tokens.test.ts). */
:root {
  color-scheme: dark;

  --orange: #F28C4E;
  --accent: var(--orange);
  --brand: var(--orange);

  --paper: #161513;
  --side: #121110;
  --surface: #1E1D1A;
  --overlay: #282622;
  --sunken: #11100E;
  --hover: #282622;
  --ink: #F3EFE7;
  --ink-2: #CFC8BC;
  --muted: #A0988C;
  --line: #2C2A26;
  --line-2: #3B3833;
  --rival: #67625A;
  /* Caution leans yellow and stop leans rose, so neither reads as the orange accent. */
  --hold: #E3BE4F; --hold-soft: #2C2716;
  --stop: #F36B7A; --stop-soft: #34191E;
  --good: #57C78E;
  --bad: #F36B7A;
  --tip-bg: #33302B; --tip-ink: #F3EFE7;
  --knob: #F3EFE7;
  --scrim: rgb(0 0 0 / .55);

  --accent-ink: #F6A26F;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-wash: color-mix(in srgb, var(--accent) 24%, transparent);
  --on-accent: #1A120B;

  /* The same engines in the same hues as in light, lifted for the dark; Perplexity turns cyan,
     because orange is the brand here. */
  --series-2: #5B9DF0; --series-3: #EC7AB4; --series-4: #A08FF5; --series-5: #E6CB5C;
  --series-6: #4CC48C; --series-7: #4CC3D6; --series-8: #C385E8;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .35), 0 10px 24px -10px rgb(0 0 0 / .55);
  --shadow-3: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -12px rgb(0 0 0 / .6);
}
/* ?accent= compares accents in light; the dark theme keeps its orange. */
:root[data-accent] { --accent: var(--orange); --brand: var(--orange); }

/* The heat map: none at all a quiet grey, not a hole; the second strongest step carries dark
   text, so it needs more orange than in light. */
.h0 { background: var(--hover); }
.h4 { background: color-mix(in srgb, var(--accent) 82%, var(--surface)); }
/* Menus and popovers stand out by a hairline more than by their shadow. */
.menu-panel, .sb-menu, .prompt-pop { border-color: var(--line-2); }
/* The table's scroll shadows, darker. */
.table-wrap {
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .5), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .5), transparent) right / 12px 100% no-repeat scroll,
    var(--surface);
}