/* ═══════════════════════════════════════
   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:        #101010;
  --menu-bg:        #101010;
  --page-open-header: #F5F5F7;
  --page-bg-open:   #181818;
  --tile-bg:        #121212;

  /* Borders */
  --border:         #323232;

  /* Text */
  --label:          #616161;
  --text-primary:   #F3F4F6;
  --text-secondary: #777777;

  /* Buttons */
  --button-bg:      #101010;
  --button-border:  #323232;
  --button-text-pressed: #A8AAAB;

  /* Switches */
  --switch-active:  #C42FFA;
  --switch-thumb:   #F3F4F6;

  /* 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:        #FFFFFF;
    --menu-bg:        #FFFFFF;
    --page-open-header: #000000;
    --page-bg-open:   #FAFAFA;
    --tile-bg:        #FFFFFF;
    --border:         #D9D9D9;
    --label:          #A8A8A8;
    --text-primary:   #000000;
    --text-secondary: #9B9B9B;
    --button-bg:      #FFFFFF;
    --button-border:  #D9D9D9;
    --button-text-pressed: #9B9B9B;
    --switch-active:  #16A34A;
    --switch-thumb:   #FFFFFF;
    --danger:         #FF0033;
    --success:        #16A34A;
  }
}


/* ── Manual theme toggle (dark) ── */
[data-theme="dark"] {
  --bg-main:        #101010;
  --menu-bg:        #101010;
  --page-open-header: #F5F5F7;
  --page-bg-open:   #181818;
  --tile-bg:        #121212;
  --border:         #323232;
  --label:          #616161;
  --text-primary:   #F3F4F6;
  --text-secondary: #777777;
  --button-bg:      #101010;
  --button-border:  #323232;
  --button-text-pressed: #A8AAAB;
  --switch-active:  #C42FFA;
  --switch-thumb:   #F3F4F6;
  --danger:         #FF0033;
}

/* ── Manual theme toggle (light) ── */
[data-theme="light"] {
  --bg-main:        #FFFFFF;
  --menu-bg:        #FFFFFF;
  --page-open-header: #000000;
  --page-bg-open:   #FAFAFA;
  --tile-bg:        #FFFFFF;
  --border:         #D9D9D9;
  --label:          #A8A8A8;
  --text-primary:   #000000;
  --text-secondary: #9B9B9B;
  --button-bg:      #FFFFFF;
  --button-border:  #D9D9D9;
  --button-text-pressed: #9B9B9B;
  --switch-active:  #16A34A;
  --switch-thumb:   #FFFFFF;
  --danger:         #FF0033;
  --success:        #16A34A;
}