/* «Живая глазурь» — тактильность керамики плюс точность обсерватории.
 *
 * Ключевое решение: анимация несёт данные. Сферы медленно меняют форму, каждая
 * в своём ритме; замолчавшая замирает, теряет блик и обесцвечивается. Мёртвую
 * сферу видно боковым зрением, не читая подписей — это и есть вторая цель
 * системы, вынесенная в моторику интерфейса.
 *
 * Обе темы обязательны: Mini App подтягивает тему Telegram. Атрибут свой,
 * не [data-theme] — telegram-web-app.js ставит его сам даже в обычном браузере
 * и своим выдуманным "light" перебил бы системную тёмную тему.
 *
 * Веб-шрифты не подключаем: CSP Telegram их режет. Стек — округлые гротески,
 * которые есть на iOS и Android.
 */

:root {
  --bg: #f1ebe1;
  --bg-top: #faf7f1;
  --surface: #fffdf8;
  --surface-2: #f6f0e6;
  --ink: #2b2622;
  --ink-soft: #6d6357;
  --ink-faint: #9c8f7f;
  --line: #ece3d6;
  --line-strong: #ddd3c6;

  /* Глазури: насыщенные, с запасом на блик сверху и тень снизу */
  --g1: #2d6e63; --g1-lit: #4e9c8f;
  --g2: #4a5899; --g2-lit: #6d7cc0;
  --g3: #63793a; --g3-lit: #8f9c5e;
  --g4: #b5432f; --g4-lit: #d4794f;
  --g5: #7a5b9e; --g5-lit: #9d81bd;
  --g6: #b8842a; --g6-lit: #d9a94f;

  --hot: #a8412b;
  --hot-bg: #fbe3dd;
  --cold: #9c8f7f;

  --on-glaze: #fffdf8;
  --glow: 0 16px 30px -14px;
  --inner: inset 0 -10px 20px -8px rgba(0, 0, 0, .35), inset 0 8px 16px -6px rgba(255, 255, 255, .5);

  --radius: 16px;
  --radius-lg: 22px;
  --tap: 44px;
  --sheet-shadow: 0 -10px 30px -16px rgba(60, 45, 35, .5);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Avenir Next",
          "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: ui-rounded, -apple-system, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141b;
    --bg-top: #18202a;
    --surface: #141c24;
    --surface-2: #1a242e;
    --ink: #dde5ea;
    --ink-soft: #9fb3c2;
    --ink-faint: #7e93a3;
    --line: #24313c;
    --line-strong: #2f3f4c;

    /* В темноте глазурь светится изнутри: тень уступает место свечению */
    --g1: #35a894; --g1-lit: #7fe0cd;
    --g2: #6675c9; --g2-lit: #a8b4f0;
    --g3: #9ab85c; --g3-lit: #cfe38f;
    --g4: #e8734f; --g4-lit: #ffb08c;
    --g5: #a17fd0; --g5-lit: #c9b0f0;
    --g6: #e0aa4a; --g6-lit: #ffd68c;

    --hot: #ff9d7f;
    --hot-bg: #3a2320;
    --cold: #6d8494;

    --on-glaze: #0b1418;
    --glow: 0 0 42px -6px;
    --inner: inset 0 -10px 20px -8px rgba(0, 0, 0, .4), inset 0 8px 16px -6px rgba(255, 255, 255, .32);
    --sheet-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .9);
  }
}

:root[data-atlas-theme="light"] {
  --bg: #f1ebe1; --bg-top: #faf7f1; --surface: #fffdf8; --surface-2: #f6f0e6;
  --ink: #2b2622; --ink-soft: #6d6357; --ink-faint: #9c8f7f;
  --line: #ece3d6; --line-strong: #ddd3c6;
  --g1: #2d6e63; --g1-lit: #4e9c8f; --g2: #4a5899; --g2-lit: #6d7cc0;
  --g3: #63793a; --g3-lit: #8f9c5e; --g4: #b5432f; --g4-lit: #d4794f;
  --g5: #7a5b9e; --g5-lit: #9d81bd; --g6: #b8842a; --g6-lit: #d9a94f;
  --hot: #a8412b; --hot-bg: #fbe3dd; --cold: #9c8f7f;
  --on-glaze: #fffdf8; --glow: 0 16px 30px -14px;
  --inner: inset 0 -10px 20px -8px rgba(0, 0, 0, .35), inset 0 8px 16px -6px rgba(255, 255, 255, .5);
  --sheet-shadow: 0 -10px 30px -16px rgba(60, 45, 35, .5);
}

:root[data-atlas-theme="dark"] {
  --bg: #0e141b; --bg-top: #18202a; --surface: #141c24; --surface-2: #1a242e;
  --ink: #dde5ea; --ink-soft: #9fb3c2; --ink-faint: #7e93a3;
  --line: #24313c; --line-strong: #2f3f4c;
  --g1: #35a894; --g1-lit: #7fe0cd; --g2: #6675c9; --g2-lit: #a8b4f0;
  --g3: #9ab85c; --g3-lit: #cfe38f; --g4: #e8734f; --g4-lit: #ffb08c;
  --g5: #a17fd0; --g5-lit: #c9b0f0; --g6: #e0aa4a; --g6-lit: #ffd68c;
  --hot: #ff9d7f; --hot-bg: #3a2320; --cold: #6d8494;
  --on-glaze: #0b1418; --glow: 0 0 42px -6px;
  --inner: inset 0 -10px 20px -8px rgba(0, 0, 0, .4), inset 0 8px 16px -6px rgba(255, 255, 255, .32);
  --sheet-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .9);
}