/* Палитра мини-аппов. Подключать первым файлом.
   Цвета в rgb-тройках (14 16 16), чтобы писать прозрачность: rgb(var(--page-rgb) / .5) */

:root {
    /* фон страницы — графитовый серый (текущий, основной) */
    --page-rgb: 14 16 16;          /* #0e1010 */
    /* плитки, кнопки, круглые кнопки — на ступень светлее фона */
    --tile-rgb: 20 22 22;          /* #141616 */
    /* навбар, всплывающие окна */
    --sheet-bg: #1c1e1e;

    /* «чернила»: из них делаются все полупрозрачные слои (плашка навбара, разделители, заливки полей) */
    --ink: 255 255 255;
    --sep: rgb(var(--ink) / .08);
    --tile-border: rgb(255 255 255 / 0.2);
    --skeleton-strong: rgb(255 255 255 / 0.075);
    --skeleton-soft: rgb(255 255 255 / 0.045);

    --text: #f4f5f5;               /* основной текст, активная иконка навбара */
    --hint: #98989e;               /* подписи, неактивные иконки */
    --accent: #f3b443;             /* золотой акцент: цены, «открыто», выделение */
    --danger: #ff595a;

    --ease: cubic-bezier(.32, .72, 0, 1);   /* iOS-пружина для всех нажатий и выездов */
    --display: "Unbounded", "Onest", system-ui, sans-serif;

    /* отступы под вырез и полоску «домой»: вне Telegram — системные, внутри — от Telegram */
    --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
}

/* Другие фоны. Меняются только три переменные, остальное подстраивается само.
   Включить: <html data-bg="ios"> и т.д. Цвет шапки Telegram (setHeaderColor) поставить таким же, как --page-rgb */

/* чистый iOS-тёмный */
:root[data-bg="ios"] {
    --page-rgb: 0 0 0;
    --tile-rgb: 28 28 30;
    --sheet-bg: #1c1c1e;
}

/* светлее: серый «как в настройках iPhone, тёмная тема» */
:root[data-bg="gray"] {
    --page-rgb: 28 28 30;
    --tile-rgb: 44 44 46;
    --sheet-bg: #2c2c2e;
}

/* тёплый графит */
:root[data-bg="warm"] {
    --page-rgb: 18 16 14;
    --tile-rgb: 26 23 21;
    --sheet-bg: #221f1c;
}

/* синеватый, как фон Telegram в тёмной теме */
:root[data-bg="tg"] {
    --page-rgb: 24 24 24;
    --tile-rgb: 33 33 33;
    --sheet-bg: #212121;
}