/* ═══════════════════════════════════════════════════════════════════════
   theme.css — yorug'/qorong'i mavzu va Telegram mavzusini moslash

   Qoida:
     1. TO'LIQ yorug' palitra — oddiy `:root` da (media so'rovsiz).
     2. Qorong'ida FAQAT o'zgargan tokenlar qayta yoziladi,
        `:root:not([data-theme="light"])` bilan himoyalangan holda —
        foydalanuvchi «yorug'» ni aniq tanlagan bo'lsa, tizim mavzusi yutmaydi.
     3. Aniq tanlov (`[data-theme="dark"]`) media so'rovdan keyin keladi,
        shunda u har ikki yo'nalishda ham ustun bo'ladi.
     4. Mini App'da `body.tg` Telegram qiymatlarini ustidan yozadi.
        Telegram mavzu o'zgaruvchilari HAMMASI ixtiyoriy — doim zaxira qiymat.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Yorug' palitra (to'liq) ────────────────────────────────────────── */

:root {
  --bg:            #ffffff;
  --bg-elevated:   #f7f8fa;
  --bg-sunken:     #eef0f4;
  --text:          #12161c;
  --text-dim:      #6b7480;
  --border:        #e3e6ea;
  --border-strong: #cfd4db;
  --accent:        #2f7fed;
  --accent-text:   #ffffff;
  --accent-soft:   #e8f0fe;
  --link:          #2f7fed;
  --positive:      #1a9463;   /* olishi kerak */
  --negative:      #d84a3a;   /* berishi kerak */
  --warning:       #b8770c;
  --overlay:       rgba(18, 22, 28, 0.45);
  --shadow:        0 1px 2px rgba(18, 22, 28, 0.06), 0 8px 24px rgba(18, 22, 28, 0.08);
  --shadow-sm:     0 1px 2px rgba(18, 22, 28, 0.08);
  --skeleton:      #e9ecf1;
}

/* ── 2. Tizim qorong'i mavzusi ─────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #14171c;
    --bg-elevated:   #1c2027;
    --bg-sunken:     #0f1216;
    --text:          #eef1f5;
    --text-dim:      #939ba7;
    --border:        #2a2f38;
    --border-strong: #3a414d;
    --accent:        #4d94f5;
    --accent-text:   #0d1117;
    --accent-soft:   #1b2a40;
    --positive:      #35c58d;
    --negative:      #ff6f5e;
    --warning:       #e0a740;
    --overlay:       rgba(0, 0, 0, 0.6);
    --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
    --skeleton:      #232830;
  }
}

/* ── 3. Foydalanuvchi aniq tanlagan qorong'i mavzu ─────────────────────── */

:root[data-theme="dark"] {
  --bg:            #14171c;
  --bg-elevated:   #1c2027;
  --bg-sunken:     #0f1216;
  --text:          #eef1f5;
  --text-dim:      #939ba7;
  --border:        #2a2f38;
  --border-strong: #3a414d;
  --accent:        #4d94f5;
  --accent-text:   #0d1117;
  --accent-soft:   #1b2a40;
  --positive:      #35c58d;
  --negative:      #ff6f5e;
  --warning:       #e0a740;
  --overlay:       rgba(0, 0, 0, 0.6);
  --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
  --skeleton:      #232830;
}

/* ── 4. Mini App: Telegram mavzusi ustidan yoziladi ────────────────────── */

/*
   `tg.js` sinfni faqat Mini App aniqlangandan keyin qo'yadi.
   Har bir o'zgaruvchi ixtiyoriy, shuning uchun zaxira qiymat — MAJBURIY.
   Zaxira sifatida yuqoridagi tokenlarning o'zi ishlatiladi: agar Telegram
   qiymat bermasa, ilova o'z yorug'/qorong'i mavzusida qoladi.
*/
body.tg {
  --bg:          var(--tg-theme-bg-color, #ffffff);
  --bg-elevated: var(--tg-theme-secondary-bg-color, #f7f8fa);
  --bg-sunken:   var(--tg-theme-secondary-bg-color, #eef0f4);
  --text:        var(--tg-theme-text-color, #12161c);
  --text-dim:    var(--tg-theme-hint-color, #6b7480);
  --accent:      var(--tg-theme-button-color, #2f7fed);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --link:        var(--tg-theme-link-color, var(--accent));
  --negative:    var(--tg-theme-destructive-text-color, #d84a3a);
}

/*
   Telegram chegara rangi bermaydi. Qorong'i mavzuda oq chegara ko'zni
   qamashtiradi, shuning uchun uni matn rangidan shaffoflik bilan yasaymiz —
   bu har qanday Telegram mavzusiga o'zi moslashadi.
*/
body.tg {
  --border:        color-mix(in srgb, var(--text) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 26%, transparent);
  --accent-soft:   color-mix(in srgb, var(--accent) 14%, transparent);
  --skeleton:      color-mix(in srgb, var(--text) 8%, transparent);
}

/* `color-mix` qo'llab-quvvatlanmasa — oddiy zaxira (eski mijozlar) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  body.tg {
    --border:        rgba(128, 134, 145, 0.28);
    --border-strong: rgba(128, 134, 145, 0.5);
    --accent-soft:   rgba(47, 127, 237, 0.14);
    --skeleton:      rgba(128, 134, 145, 0.16);
  }
}

/* Telegram qorong'i mavzusida soya deyarli ko'rinmaydi — kuchaytiramiz */
body.tg[data-color-scheme="dark"] {
  --overlay:   rgba(0, 0, 0, 0.6);
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}