/* ============================================================================
 * LessonLab — YAGONA DIZAYN TOKENLARI
 *
 * NIMA UCHUN BU FAYL BOR
 * ----------------------
 * Ilgari har sahifa o'z ranglarini o'zi e'lon qilardi: landing'da ko'k→moviy,
 * EduGames'da binafsha→ko'k, skanerda pushti, miniapp'da yana boshqacha.
 * Bitta ekranda to'rt-besh gradient raqobatlashardi va sayt "premium"
 * ko'rinmasdi. Sabab rang TANLOVIDA emas, rang SONIDA edi.
 *
 * Endi rang bitta joyda: shu fayl. Sahifalar faqat `var(--ll-*)` ishlatadi.
 * Brend rangini o'zgartirish kerak bo'lsa — bu yerda BITTA qator.
 *
 * ULASH (style.css dan OLDIN, chunki sahifa uslubi tokenlarni ishlatadi):
 *   <link rel="stylesheet" href="/assets/theme.css">
 *   <link rel="stylesheet" href="style.css">
 *
 * ⚠️ ASOSIY QOIDA — URG'U RANGI KAM ISHLATILADI
 * Havorang faqat BITTA ish uchun: "keyingi qadam qayerda". Ya'ni asosiy
 * tugma, aktiv bo'lim, fokus halqasi. Kartaning foni, sarlavha, ramka —
 * neytral bo'ladi. Hamma narsa rangli bo'lsa, hech narsa ajralib turmaydi.
 *
 * ⚠️ KONTRAST — buzilmasin
 * Ustozlar yorug' sinfxonada, arzon telefonda ishlaydi. Matn ranglari
 * WCAG AA (4.5:1) bo'yicha tanlangan, quyida har biriga o'lchov yozilgan.
 * Yangi kulrang o'ylab topmang — pastdagi uchtasidan birini oling.
 * ========================================================================== */

:root {
  /* ── URG'U: sof havorang ─────────────────────────────────────────────
     Na neon (ko'zni qamashtiradi), na xira (yuvilgandek ko'rinadi).
     --ll-acc  — ikonka, aktiv holat, kichik urg'ular uchun
     --ll-acc-grad — TO'LDIRILGAN tugmalar uchun. Nega alohida: oq matn
       ochiq havorangda o'qilmaydi (#0EA5E9 ustida atigi 2.9:1). Gradient
       to'qroq tomonga tushadi va matn AA dan o'tadi. To'ldirilgan tugmaga
       --ll-acc ni TO'G'RIDAN-TO'G'RI bermang. */
  --ll-acc:        #0EA5E9;
  --ll-acc-strong: #0284C7;
  --ll-acc-deep:   #0369A1;
  --ll-acc-grad:   linear-gradient(135deg, #0EA5E9, #0369A1);
  --ll-acc-ink:    #075985;   /* yumshoq fon ustidagi matn — 8.3:1 */
  --ll-acc-soft:   #E0F2FE;   /* ko'rinadigan tus: plitka, aktiv bo'lim foni */
  --ll-acc-line:   #BAE6FD;   /* yumshoq fonli elementning ramkasi */
  --ll-acc-ring:   rgba(14,165,233,.18);   /* fokus halqasi */

  /* ── NEYTRAL YUZALAR — dizaynning 90% i shular ── */
  --ll-bg:       #EDF4FA;   /* sahifa foni — havorangga engil moyil */
  --ll-bg-grad:  linear-gradient(170deg, #EFF6FC 0%, #E6EFF8 100%);
  --ll-surface:  #FFFFFF;   /* karta, modal, panel */
  --ll-surface2: #F6F9FC;   /* maydon foni, ikkilamchi yuza */
  --ll-line:     #E3EBF3;   /* ajratuvchi chiziq, ramka */

  /* ── MATN — faqat shu uchtasi (oq fonda o'lchangan) ── */
  --ll-ink:  #0F172A;   /* sarlavha        — 17.4:1 */
  --ll-ink2: #475569;   /* asosiy matn     —  7.5:1 */
  --ll-ink3: #64748B;   /* ikkilamchi matn —  4.8:1 (AA chegarasi) */

  /* ── HOLAT ranglari — faqat MA'NO bildirganda, bezak uchun emas ── */
  --ll-ok:    #16A34A;  --ll-ok-soft:    #DCFCE7;
  --ll-warn:  #D97706;  --ll-warn-soft:  #FEF3C7;
  --ll-err:   #DC2626;  --ll-err-soft:   #FEE2E2;
  /* Binafsha — bolalar bo'limi (o'yin) uchun ikkilamchi urg'u.
     Interfeys tugmalarida ISHLATILMAYDI, aks holda urg'u ikkita bo'lib
     qoladi va ikkalasi ham kuchini yo'qotadi. */
  --ll-play:  #7C3AED;  --ll-play-soft:  #EDE9FE;

  /* ── JAMOA ranglari (2 jamoali o'yinlar: arqon tortish, jonli o'yin) ──
     Bular urg'u rangi EMAS — ular jamoani ajratish uchun. O'quvchi
     "men ko'k tomondaman" deb eslab qoladi, shuning uchun ikkalasi ham
     bir xil kuchda va butun o'yin bo'ylab O'ZGARMASLIGI kerak: ball,
     savol tugmasi, javob harfi, jamoa nomi — hammasi shu ikki rangda.
     Interfeys elementlariga (tugma, panel) ISHLATMANG. */
  --ll-team1:      #2563EB;  --ll-team1-soft: #EFF6FF;  /* 1-jamoa — ko'k */
  --ll-team2:      #DC2626;  --ll-team2-soft: #FEF2F2;  /* 2-jamoa — qizil */

  /* ── SHAKL ── */
  --ll-r-lg:   22px;   /* karta, modal */
  --ll-r-md:   14px;   /* tugma, maydon */
  --ll-r-sm:   11px;   /* chip, ro'yxat qatori */
  --ll-r-pill: 999px;

  /* ── SOYA — havorangga moyil, kulrang emas: yuza "iliq" ko'rinadi ── */
  --ll-sh-sm: 0 2px 8px rgba(15,42,72,.05);
  --ll-sh:    0 6px 20px rgba(15,42,72,.07);
  --ll-sh-lg: 0 18px 44px rgba(15,42,72,.10);
  --ll-sh-acc: 0 8px 20px rgba(3,105,161,.26);   /* faqat asosiy tugma */

  --ll-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Tugma bosilganda "cho'kish" — butun sayt bo'ylab bir xil his ── */
@media (prefers-reduced-motion: no-preference) {
  .ll-press { transition: transform .12s ease, box-shadow .15s ease; }
  .ll-press:active { transform: scale(.97); }
}

/* ── Klaviatura fokusi: KO'RINISHI SHART.
   `outline: none` yozmang — klaviatura bilan yuradigan foydalanuvchi
   qayerda turganini yo'qotadi. Kerak bo'lsa shu halqani qayta bo'yang. ── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ll-acc);
  outline-offset: 2px;
  border-radius: var(--ll-r-sm);
}