/*
 * The extension's one palette, for every page it owns: the popup, the
 * Translate Any Audio window, History and the support page. Pages keep their
 * own layout styles and use only these tokens for colour, so one edit here
 * recolours them all.
 *
 * The accent is the logo's own terracotta, #C6613F: white text on it measures
 * 5.3:1 (WCAG AA). The transcript panel over a video lives in a shadow root on
 * the website's page and cannot link this file; panel-css.js repeats the
 * accent values.
 */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f6f3f1;
  --fg: #1f1a17;
  --muted: #6e6560;
  --line: #e6dfda;
  --field: #ffffff;
  --hover: #f6f3f1;
  --accent: #c6613f;
  --accent-hover: #b0532f;
  --accent-text: #b4532f;
  --accent-soft: #f7e6df;
  --warn: #9a5b00;
  --ok: #2a8a3e;
  --dot: #e0453a;
}

/* A warm grey rather than a cold one, so the terracotta sits well; accent
 * text is lighter so it reads on it. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1b19;
    --surface: #282422;
    --fg: #f2eeeb;
    --muted: #a89f99;
    --line: #38322e;
    --field: #282422;
    --hover: #2f2a27;
    --accent-hover: #d8704c;
    --accent-text: #e8865f;
    --accent-soft: #3a2a23;
    --warn: #f0b35a;
    --ok: #6cc47f;
  }
}