:root {
  /* Chrome: inside Telegram, theme.js overrides each of these ten from its themeParams
     field on the root, and a field Telegram omits keeps the value here. theme.js never
     binds a semantic token; those follow data-theme, which it sets from colorScheme. */
  --tg-bg: #ffffff;
  --tg-secondary-bg: #eef1f5;
  --tg-text: #0d1620;
  --tg-hint: #8a95a1;
  --tg-link: #2481cc;
  --tg-accent: #2481cc;
  --tg-section: #ffffff;
  --tg-separator: #e4e8ee;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;

  /* Semantic: ours, never bound to Telegram's theme */
  --tg-crit: #d5384f;
  --tg-crit-wash: #fce7ea;
  --tg-warn: #d9891f;
  --tg-warn-wash: #faf0dc;
  --tg-good: #2aab6b;
  --tg-good-wash: #e2f4ea;
  --tg-pill: #eaf2fb;
  --tg-pill-ink: #2f77b5;
  --tg-soon: #aab4bf;
  --tg-subtle: #5e6a76;
  --teach: #b45a1f;
  --teach-wash: #faf1e9;
  --ask-wash: #f4f8fc;
  --frame: #d3d9e0;
  --shadow: 0 20px 60px rgba(20,40,60,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tg-bg: #17212b;
    --tg-secondary-bg: #0e1621;
    --tg-text: #eef4fa;
    --tg-hint: #6d7f8f;
    --tg-link: #62bcf9;
    --tg-accent: #50a8eb;
    --tg-section: #17212b;
    --tg-separator: #101c27;
    --tg-button: #50a8eb;
    --tg-button-text: #ffffff;

    --tg-crit: #ec5f6e;
    --tg-crit-wash: #35181c;
    --tg-warn: #e2a850;
    --tg-warn-wash: #33280f;
    --tg-good: #4bcf8f;
    --tg-good-wash: #10322663;
    --tg-pill: #1c2c3a;
    --tg-pill-ink: #7dc0f0;
    --tg-soon: #55606b;
    --tg-subtle: #8d9cab;
    --teach: #e8975a;
    --teach-wash: #2b1d12;
    --ask-wash: #1a2634;
    --frame: #05090d;
    --shadow: 0 20px 60px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --tg-bg: #17212b;
  --tg-secondary-bg: #0e1621;
  --tg-text: #eef4fa;
  --tg-hint: #6d7f8f;
  --tg-link: #62bcf9;
  --tg-accent: #50a8eb;
  --tg-section: #17212b;
  --tg-separator: #101c27;
  --tg-button: #50a8eb;
  --tg-button-text: #ffffff;

  --tg-crit: #ec5f6e;
  --tg-crit-wash: #35181c;
  --tg-warn: #e2a850;
  --tg-warn-wash: #33280f;
  --tg-good: #4bcf8f;
  --tg-good-wash: #10322663;
  --tg-pill: #1c2c3a;
  --tg-pill-ink: #7dc0f0;
  --tg-soon: #55606b;
  --tg-subtle: #8d9cab;
  --teach: #e8975a;
  --teach-wash: #2b1d12;
  --ask-wash: #1a2634;
  --frame: #05090d;
  --shadow: 0 20px 60px rgba(0,0,0,.5);
}

:root[data-theme="light"] {
  --tg-bg: #ffffff;
  --tg-secondary-bg: #eef1f5;
  --tg-text: #0d1620;
  --tg-hint: #8a95a1;
  --tg-link: #2481cc;
  --tg-accent: #2481cc;
  --tg-section: #ffffff;
  --tg-separator: #e4e8ee;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;

  --tg-crit: #d5384f;
  --tg-crit-wash: #fce7ea;
  --tg-warn: #d9891f;
  --tg-warn-wash: #faf0dc;
  --tg-good: #2aab6b;
  --tg-good-wash: #e2f4ea;
  --tg-pill: #eaf2fb;
  --tg-pill-ink: #2f77b5;
  --tg-soon: #aab4bf;
  --tg-subtle: #5e6a76;
  --teach: #b45a1f;
  --teach-wash: #faf1e9;
  --ask-wash: #f4f8fc;
  --frame: #d3d9e0;
  --shadow: 0 20px 60px rgba(20,40,60,.16);
}