/* theme.css — палітра + spacing/radius/typography токени.
   Стратегія: ПОВНІ light/dark палітри через [data-scheme=...] селектор.
   TG SDK може overrideять окремі змінні, наші бази вкладаються першими. */

:root {
  /* === Spacing tokens === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* === Typography === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;

  /* === Animation === */
  --transition: 200ms cubic-bezier(.2,.8,.2,1);

  /* === Safe areas (filled by tg.js) === */
  --tg-safe-top: 0px;
  --tg-safe-bottom: 0px;
  --tg-safe-left: 0px;
  --tg-safe-right: 0px;
  --tg-content-safe-top: 0px;
  --tg-content-safe-bottom: 0px;
  --tg-vh: 100vh;
  --tg-vh-stable: 100vh;
  --tabbar-h: 64px;

  /* === DARK PALETTE (default) ===
     Усі кольори контрастні: текст НЕ зливається з фоном.
     bg < secondary_bg < section_bg ← кожен наступний світліший на крок */
  --tg-theme-bg-color:                  #0F1115;
  --tg-theme-secondary-bg-color:        #181C22;
  --tg-theme-section-bg-color:          #1F2329;
  --tg-theme-section-separator-color:   #2A2F37;
  --tg-theme-text-color:                #F4F6F8;
  --tg-theme-hint-color:                #94989D;
  --tg-theme-subtitle-text-color:       #94989D;
  --tg-theme-link-color:                #5EA9FF;
  --tg-theme-button-color:              #2EA6FF;
  --tg-theme-button-text-color:         #FFFFFF;
  --tg-theme-accent-text-color:         #FFD500;
  --tg-theme-section-header-text-color: #FFD500;
  --tg-theme-destructive-text-color:    #FF5A5F;
  --tg-theme-header-bg-color:           #0F1115;
  --tg-theme-bottom-bar-bg-color:       #16181D;

  --shadow-1: 0 1px 2px rgba(0,0,0,.32);
  --shadow-2: 0 4px 12px rgba(0,0,0,.36);

  color-scheme: dark;
}

/* === LIGHT PALETTE === */
[data-scheme="light"] {
  --tg-theme-bg-color:                  #FFFFFF;
  --tg-theme-secondary-bg-color:        #F2F4F7;
  --tg-theme-section-bg-color:          #FFFFFF;
  --tg-theme-section-separator-color:   #E5E7EB;
  --tg-theme-text-color:                #0A0B0D;
  --tg-theme-hint-color:                #6B7280;
  --tg-theme-subtitle-text-color:       #6B7280;
  --tg-theme-link-color:                #1F8AE0;
  --tg-theme-button-color:              #2EA6FF;
  --tg-theme-button-text-color:         #FFFFFF;
  --tg-theme-accent-text-color:         #1F8AE0;
  --tg-theme-section-header-text-color: #1F8AE0;
  --tg-theme-destructive-text-color:    #E5484D;
  --tg-theme-header-bg-color:           #FFFFFF;
  --tg-theme-bottom-bar-bg-color:       #FFFFFF;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,.10);

  color-scheme: light;
}

/* Manual overrides (через Settings → Тема: light) — пріоритетніше за [data-scheme] */
html[data-theme="light"] {
  /* Дублюємо light palette бо data-theme має пріоритет над data-scheme */
  --tg-theme-bg-color:                  #FFFFFF;
  --tg-theme-secondary-bg-color:        #F2F4F7;
  --tg-theme-section-bg-color:          #FFFFFF;
  --tg-theme-section-separator-color:   #E5E7EB;
  --tg-theme-text-color:                #0A0B0D;
  --tg-theme-hint-color:                #6B7280;
  --tg-theme-subtitle-text-color:       #6B7280;
  --tg-theme-link-color:                #1F8AE0;
  --tg-theme-accent-text-color:         #1F8AE0;
  --tg-theme-section-header-text-color: #1F8AE0;
  --tg-theme-destructive-text-color:    #E5484D;
  --tg-theme-header-bg-color:           #FFFFFF;
  --tg-theme-bottom-bar-bg-color:       #FFFFFF;
  color-scheme: light;
}
html[data-theme="dark"] {
  --tg-theme-bg-color:                  #0F1115;
  --tg-theme-secondary-bg-color:        #181C22;
  --tg-theme-section-bg-color:          #1F2329;
  --tg-theme-section-separator-color:   #2A2F37;
  --tg-theme-text-color:                #F4F6F8;
  --tg-theme-hint-color:                #94989D;
  --tg-theme-subtitle-text-color:       #94989D;
  --tg-theme-link-color:                #5EA9FF;
  --tg-theme-accent-text-color:         #FFD500;
  --tg-theme-section-header-text-color: #FFD500;
  --tg-theme-destructive-text-color:    #FF5A5F;
  --tg-theme-header-bg-color:           #0F1115;
  --tg-theme-bottom-bar-bg-color:       #16181D;
  color-scheme: dark;
}