/* ═══════════════════════════════════════
   ATMA — Design Tokens (FINAL)
   Single source of truth for ALL colors.
   NO rgba. NO gradients. NO glass/blur.
   ═══════════════════════════════════════ */

/* ── Dark Theme (default) ── */
:root {
  /* Safe Area */
  --safe-top:       env(safe-area-inset-top, 0px);
  /* Полоска возврата внизу айфона. ЕДИНСТВЕННОЕ место, где она
     объявлена: всё, что отводит под неё место — нижнее меню, поле
     ввода в чатах, отступ под содержимым — берёт её отсюда. Раньше
     то же самое было переписано вручную в девяти местах, и они
     разъезжались. Меню закрывает полоску своим фоном целиком, как
     это делают приложения: подписи стоят НАД полоской, а не под ней. */
  --safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* Backgrounds */
  --bg-main:        #17181B;
  --menu-bg:        #17181B;
  --page-open-header: #F1F0EC;
  --page-bg-open:   #1E2024;
  --tile-bg:        #22242A;

  /* Borders */
  --border:         #393C44;

  /* Text */
  --label:          #868A94;
  --text-primary:   #F2F1ED;
  --text-secondary: #AAADB6;

  /* Buttons */
  --button-bg:      #1D1F24;
  --button-border:  #393C44;
  --button-text-pressed: #C2C5CC;

  /* Switches */
  --switch-active:  #9B7DD6;
  --switch-thumb:   #F2F1ED;

  /* Semantic */
  --danger:         #FF0033;
  --success:        #16A34A;

  /* Geometry */
  --radius:         14px;
  --radius-sm:      8px;
  --radius-md:      16px;
  --radius-lg:      20px;
  --tab-h:          56px;
  --tabbar-h:       56px;
  --header-h:       52px;
  --gap:            14px;
  --gap-sm:         8px;
  --space-xs:       8px;
  --space-sm:       12px;
  --space-md:       18px;
  --space-lg:       24px;
  --space-xl:       32px;

  /* Spacing grid (8px base) */
  --space-1:        8px;
  --space-2:        16px;
  --space-3:        24px;
  --space-4:        32px;
  --space-5:        40px;

  /* Typography */
  --fs-xs:          11px;
  --fs-sm:          13px;
  --fs-base:        15px;
  --fs-lg:          17px;
  --fs-xl:          20px;
  --fs-2xl:         24px;

  /* Input geometry */
  --input-radius:   10px;
  --input-padding:  10px 14px;

  /* Transitions */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --duration:       0.2s;

  /* Z-Index Scale (7 levels, max 60) */
  --z-base:         1;
  --z-content:      10;
  --z-header:       20;
  --z-sticky:       30;
  --z-dropdown:     40;
  --z-overlay:      50;
  --z-modal:        60;
}


/* ── Light Theme (system preference) ── */
@media (prefers-color-scheme: light) {
  :root {
  --lumi-on-accent-strong: #FFFFFF;   /* на тёмной терракоте — белая надпись */
    --bg-main:        #E8EFF8;
    --menu-bg:        #E8EFF8;
    --page-open-header: #1E2433;
    --page-bg-open:   #E1E9F4;
    --tile-bg:        #F0F5FC;
    --border:         #C4D0E0;
    --label:          #7A8AA0;
    --text-primary:   #1A2030;
    --text-secondary: #4A5568;
    --button-bg:      #F0F5FC;
    --button-border:  #C4D0E0;
    --button-text-pressed: #6B7A8E;
    --switch-active:  #3B82F6;
    --switch-thumb:   #FFFFFF;
    --danger:         #EF4444;
    --success:        #16A34A;
  }
}


/* ── Manual theme toggle (dark) ── */
[data-theme="dark"] {
  --bg-main:        #17181B;
  --menu-bg:        #17181B;
  --page-open-header: #F1F0EC;
  --page-bg-open:   #1E2024;
  --tile-bg:        #22242A;
  --border:         #393C44;
  --label:          #868A94;
  --text-primary:   #F2F1ED;
  --text-secondary: #AAADB6;
  --button-bg:      #1D1F24;
  --button-border:  #393C44;
  --button-text-pressed: #C2C5CC;
  --switch-active:  #9B7DD6;
  --switch-thumb:   #F3F4F6;
  --danger:         #FF0033;
}

/* ── Manual theme toggle (light) ── */
[data-theme="light"] {
  --bg-main:        #E8EFF8;
  --menu-bg:        #E8EFF8;
  --page-open-header: #1E2433;
  --page-bg-open:   #E1E9F4;
  --tile-bg:        #F0F5FC;
  --border:         #C4D0E0;
  --label:          #7A8AA0;
  --text-primary:   #1A2030;
  --text-secondary: #4A5568;
  --button-bg:      #F0F5FC;
  --button-border:  #C4D0E0;
  --button-text-pressed: #6B7A8E;
  --switch-active:  #3B82F6;
  --switch-thumb:   #FFFFFF;
  --danger:         #EF4444;
  --success:        #16A34A;
}

/* ═══════════════════════════════════════
   Пастельные темы (портированы из Вектора)
   Светлые: rose / mint / lavender / peach
   Тёмные:  *-dark
   ═══════════════════════════════════════ */

/* Rose — нежно-розовая */
[data-theme="rose"] {
  --bg-main:        #FFF5F7;
  --menu-bg:        #FFF5F7;
  --page-open-header: #3D2B33;
  --page-bg-open:   #FFF0F3;
  --tile-bg:        #FFFFFF;
  --border:         #F3D0DA;
  --label:          #B89AA3;
  --text-primary:   #3D2B33;
  --text-secondary: #8A6D77;
  --button-bg:      #FFE8EE;
  --button-border:  #F3D0DA;
  --button-text-pressed: #8A6D77;
  --switch-active:  #E8829A;
  --switch-thumb:   #FFFFFF;
  --danger:         #E0556E;
  --success:        #16A34A;
}

/* Mint — мятная */
[data-theme="mint"] {
  --bg-main:        #F0FAF5;
  --menu-bg:        #F0FAF5;
  --page-open-header: #2A3D33;
  --page-bg-open:   #EAF6EF;
  --tile-bg:        #FFFFFF;
  --border:         #C4E6D4;
  --label:          #9AB8A8;
  --text-primary:   #2A3D33;
  --text-secondary: #5D7A6B;
  --button-bg:      #E0F3E8;
  --button-border:  #C4E6D4;
  --button-text-pressed: #5D7A6B;
  --switch-active:  #5DAE89;
  --switch-thumb:   #FFFFFF;
  --danger:         #E0556E;
  --success:        #16A34A;
}

/* Lavender — лавандовая */
[data-theme="lavender"] {
  --bg-main:        #F6F2FB;
  --menu-bg:        #F6F2FB;
  --page-open-header: #2E283D;
  --page-bg-open:   #F0EAF6;
  --tile-bg:        #FFFFFF;
  --border:         #DDD0EE;
  --label:          #A89AB8;
  --text-primary:   #2E283D;
  --text-secondary: #6D6480;
  --button-bg:      #ECE4F6;
  --button-border:  #DDD0EE;
  --button-text-pressed: #6D6480;
  --switch-active:  #8E6FBC;
  --switch-thumb:   #FFFFFF;
  --danger:         #E0556E;
  --success:        #16A34A;
}

/* Peach — персиковая */
[data-theme="peach"] {
  --bg-main:        #FFF5EE;
  --menu-bg:        #FFF5EE;
  --page-open-header: #3D2D22;
  --page-bg-open:   #FDEEE2;
  --tile-bg:        #FFFFFF;
  --border:         #F3D8C4;
  --label:          #B8A08A;
  --text-primary:   #3D2D22;
  --text-secondary: #8A7363;
  --button-bg:      #FEE8D6;
  --button-border:  #F3D8C4;
  --button-text-pressed: #8A7363;
  --switch-active:  #E29A6B;
  --switch-thumb:   #FFFFFF;
  --danger:         #E0556E;
  --success:        #16A34A;
}

/* Rose Dark */
[data-theme="rose-dark"] {
  --bg-main:        #1F1419;
  --menu-bg:        #1F1419;
  --page-open-header: #F5E8ED;
  --page-bg-open:   #251720;
  --tile-bg:        #2A1A20;
  --border:         #4A2F38;
  --label:          #8A6D77;
  --text-primary:   #F5E8ED;
  --text-secondary: #B89AA3;
  --button-bg:      #3A2530;
  --button-border:  #4A2F38;
  --button-text-pressed: #B89AA3;
  --switch-active:  #F4A8B8;
  --switch-thumb:   #FFFFFF;
  --danger:         #FF5C77;
  --success:        #4ADE80;
}

/* Mint Dark */
[data-theme="mint-dark"] {
  --bg-main:        #131E18;
  --menu-bg:        #131E18;
  --page-open-header: #E0F0E8;
  --page-bg-open:   #18241D;
  --tile-bg:        #1C2A23;
  --border:         #2F4A3A;
  --label:          #5D7A6B;
  --text-primary:   #E0F0E8;
  --text-secondary: #9AB8A8;
  --button-bg:      #233830;
  --button-border:  #2F4A3A;
  --button-text-pressed: #9AB8A8;
  --switch-active:  #8EDAB0;
  --switch-thumb:   #FFFFFF;
  --danger:         #FF5C77;
  --success:        #4ADE80;
}

/* Lavender Dark */
[data-theme="lavender-dark"] {
  --bg-main:        #1A1422;
  --menu-bg:        #1A1422;
  --page-open-header: #ECE4F6;
  --page-bg-open:   #1F1828;
  --tile-bg:        #251D2E;
  --border:         #3F3450;
  --label:          #6D6480;
  --text-primary:   #ECE4F6;
  --text-secondary: #A89AB8;
  --button-bg:      #322940;
  --button-border:  #3F3450;
  --button-text-pressed: #A89AB8;
  --switch-active:  #B89AD8;
  --switch-thumb:   #FFFFFF;
  --danger:         #FF5C77;
  --success:        #4ADE80;
}

/* Peach Dark */
[data-theme="peach-dark"] {
  --bg-main:        #1F1813;
  --menu-bg:        #1F1813;
  --page-open-header: #F6EBE1;
  --page-bg-open:   #251C14;
  --tile-bg:        #2A2018;
  --border:         #4A3A2B;
  --label:          #8A7363;
  --text-primary:   #F6EBE1;
  --text-secondary: #B8A08A;
  --button-bg:      #382B21;
  --button-border:  #4A3A2B;
  --button-text-pressed: #B8A08A;
  --switch-active:  #F4B58A;
  --switch-thumb:   #FFFFFF;
  --danger:         #FF5C77;
  --success:        #4ADE80;
}

/* ═══════════════════════════════════════════════════════════════════════
   ПАЛИТРА LUMI — ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ЗАДАЮТСЯ ЦВЕТА

   Переехало сюда из css/core/lumi.css 2026-09-09. Раньше значения жили
   в двух файлах сразу: выше в этом же файле — старый набор, а в lumi.css
   (он подключается последним) — новый, который старый перекрывал. Понять,
   какой цвет получится на самом деле, можно было только запустив сайт.

   Теперь порядок такой: всё, что выше, — прежние наборы тем, оставлены
   как есть; этот блок идёт последним и задаёт действующие значения.
   Правила «что чем красится» остались в lumi.css — там только имена,
   без чисел.

   Светлый набор написан дважды намеренно: один раз для телефона со
   светлой системой, второй — для ручного выбора «светлая». Объединить
   их в одно правило нельзя, они живут в разных условиях. Значения
   обязаны совпадать.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Базовая (тёмная) палитра ──────────────────────────────────────── */
/* Цветные темы приложения (rose/mint/lavender/peach) сохраняем как есть —
   LUMI применяется только к базовым light и dark. */
:root,
:root[data-theme="dark"] {
  --lumi-on-accent-strong: #241318;   /* на светлом розовом золоте — тёмная надпись */
  --lumi-bg:            #17121A;
  --lumi-bg-elev:       #211A24;
  --lumi-bg-sunken:     #120E15;
  --lumi-card:          #241D28;
  --lumi-border:        #3A2F3E;
  --lumi-border-soft:   #2C2430;
  --lumi-text:          #F6EFEA;
  --lumi-text-2:        #C4B4B8;
  --lumi-text-3:        #9A8A90;
  --lumi-accent:        #E8A79C;   /* розовое золото — на тёмном читается */
  --lumi-accent-strong: #F2BCB0;
  --lumi-accent-fill:   #F7D9D1;   /* заливка кнопки */
  --lumi-on-accent:     #241318;   /* текст на заливке */
  --lumi-scrim:         linear-gradient(180deg, rgba(23,18,26,0) 30%, rgba(23,18,26,.55) 62%, rgba(23,18,26,.94) 100%);
  --lumi-nav-line:      rgba(255,255,255,.07);
  --lumi-icon-stroke:   1.5px;
  --lumi-shadow:        0 2px 20px rgba(0,0,0,.45);
  /* Вуаль вокруг круга кадрирования. Не сплошная заливка: сквозь неё
     должно быть видно, ЧТО именно обрезается, — иначе человек кадрирует
     вслепую. Полупрозрачный серый, а не чёрный: чёрный на светлой теме
     превращался в траурную рамку. */
  --crop-veil:          rgba(12, 9, 14, .60);
  color-scheme: dark;
}

/* ── Светлая палитра. Один общий набор для медиазапроса и ручного выбора. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lumi-bg:            #FBF7F4;
    --lumi-bg-elev:       #FFFFFF;
    --lumi-bg-sunken:     #F3ECE7;
    --lumi-card:          #FFFFFF;
    --lumi-border:        #E4D6CE;
    --lumi-border-soft:   #EFE5DE;
    --lumi-text:          #2A1D1B;
    --lumi-text-2:        #5C4844;
    --lumi-text-3:        #7A6460;
    /* Акцент ОБЯЗАН потемнеть. Розовый #FAA2A0 из макета даёт на белом
       1.96:1 — активный пункт меню практически не виден. #B84A45 даёт
       5.12:1 и остаётся в той же розово-медной семье. */
    --lumi-accent:        #B84A45;
    --lumi-accent-strong: #98342F;
    --lumi-accent-fill:   #FBD9D2;   /* заливка светлая, текст на ней тёмный */
    --lumi-on-accent:     #3A1714;
    --lumi-scrim:         linear-gradient(180deg, rgba(251,247,244,0) 30%, rgba(251,247,244,.58) 62%, rgba(251,247,244,.96) 100%);
    --lumi-nav-line:      rgba(42,29,27,.10);
    --lumi-icon-stroke:   1.9px;     /* на светлом тонкая линия теряется */
    --lumi-shadow:        0 2px 18px rgba(90,60,55,.10);
    --crop-veil:          rgba(72, 66, 78, .42);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --lumi-on-accent-strong: #FFFFFF;   /* на тёмной терракоте — белая надпись */
  --lumi-bg:            #FBF7F4;
  --lumi-bg-elev:       #FFFFFF;
  --lumi-bg-sunken:     #F3ECE7;
  --lumi-card:          #FFFFFF;
  --lumi-border:        #E4D6CE;
  --lumi-border-soft:   #EFE5DE;
  --lumi-text:          #2A1D1B;
  --lumi-text-2:        #5C4844;
  --lumi-text-3:        #7A6460;
  --lumi-accent:        #B84A45;
  --lumi-accent-strong: #98342F;
  --lumi-accent-fill:   #FBD9D2;
  --lumi-on-accent:     #3A1714;
  --lumi-scrim:         linear-gradient(180deg, rgba(251,247,244,0) 30%, rgba(251,247,244,.58) 62%, rgba(251,247,244,.96) 100%);
  --lumi-nav-line:      rgba(42,29,27,.10);
  --lumi-icon-stroke:   1.9px;
  --lumi-shadow:        0 2px 18px rgba(90,60,55,.10);
  --crop-veil:          rgba(72, 66, 78, .42);
  color-scheme: light;
}

/* ── Прокидываем LUMI в существующие переменные приложения ─────────────
   Приложение красится своими именами из tokens.css. Переопределяем их
   все разом, поэтому перекрашиваются и те экраны, которых мы не видели. */
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bg-main:          var(--lumi-bg);
  --menu-bg:          var(--lumi-bg-elev);
  --page-bg-open:     var(--lumi-bg-sunken);
  --tile-bg:          var(--lumi-card);
  --card:             var(--lumi-card);
  --card-bg:          var(--lumi-card);
  --border:           var(--lumi-border);
  --button-bg:        var(--lumi-bg-elev);
  --button-border:    var(--lumi-border);
  --text-primary:     var(--lumi-text);
  --text-secondary:   var(--lumi-text-2);
  --text:             var(--lumi-text);
  --hint:             var(--lumi-text-3);
  --label:            var(--lumi-text-3);
  --muted:            var(--lumi-text-3);
  --accent:           var(--lumi-accent);
  --accent-2:         var(--lumi-accent-strong);
  --primary:          var(--lumi-accent);
  --link:             var(--lumi-accent);
  /* Активная кнопка языка красится инлайном: background: var(--color-accent,
     #f3d27a). Перебивать это через !important нельзя — тогда пропадает сама
     отметка активного языка. Вместо этого задаём переменную. */
  --color-accent:     var(--lumi-accent-fill);
  --color-text:       var(--lumi-text);
  --color-card:       var(--lumi-card);
}

/* Цвета опасного действия («Выйти», «Удалить профиль») и мягкой подсветки
   выбранного. Раньше они объявлялись пятью одинаковыми блоками внутри
   lumi.css — отдельно для настроек, личных данных, помощи, «о приложении».
   Из-за этого на трёх экранах, где блока не было, правила ссылались
   на несуществующий цвет: подсветка выбранного в фильтрах и предупреждение
   о VPN оставались без цвета. Объявляем один раз для всего приложения. */
:root, :root[data-theme="dark"] {
  --lumi-danger:      #E0726E;
  --lumi-accent-soft: rgba(247, 217, 209, .14);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lumi-danger:      #C0453F;
    --lumi-accent-soft: rgba(198, 122, 110, .13);
  }
}
:root[data-theme="light"] {
  --lumi-danger:      #C0453F;
  --lumi-accent-soft: rgba(198, 122, 110, .13);
}

/* ── Надписи расчётов в светлых темах (27.09.2026) ───────────────────
   Экраны отчётов (нумерология, матрица, астрология, дизайн человека,
   биоритмы, ба-цзы) красили текст числами под тёмный фон: #F2F1ED,
   #AAADB6, #fbbf24 и т.п. На светлом фоне цифры квадрата Пифагора,
   сильные и слабые стороны, числа предназначения пропадали целиком
   (контраст 1.0–2.0 при норме 4.5). Правила — в конце lumi.css.
   Цвета заданы здесь, а не через --lumi-*: у светлых цветных тем
   (роза, мята, лаванда, персик) LUMI-палитры нет и --lumi-text светлый. */
:root[data-theme-effective="light"] {
  --rep-ink:    #1F1614;   /* основной текст — почти чёрный */
  --rep-ink-2:  #4D3F3B;   /* подписи и пояснения */
  --rep-line:   rgba(42, 29, 27, .14);
  --rep-violet: #5A3D9E;   /* заголовки подсказок, «Совет» */
  --rep-green:  #11704B;
  --rep-amber:  #8A5200;
  --rep-red:    #B0271F;
  --rep-blue:   #1D5FA8;
  --rep-tg:     #1878B0;   /* кнопка Telegram: белая надпись на ней */
  --rep-dim:    brightness(.5);   /* цветные надписи, цвет которых задан в разметке */
  --subtext:    #4D3F3B;   /* его ждут отчёты (var(--subtext, #b0b0c8)), а объявлен он не был */
}