/* ═══════════════════════════════════════
   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:  #C42FFA;
  --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 {
    --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:  #C42FFA;
  --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;
}