/* HadisLab — dizayn tokenlari.
   Uslub: yorqin, o'yinsimon (A) + gradient va nurli tugma/kartalar (B).
   Batafsil: docs/06-DIZAYN.md */

:root {
  /* ── Sirt va matn ─────────────────────────────────────────────── */
  --fon: #ffffff;
  --fon-2: #f5f7fc;
  --fon-osmon: linear-gradient(180deg, #eaf3ff 0%, #f5f9ff 100%);
  --karta: #ffffff;
  --karta-2: #f7f9fe;
  --siyoh: #1f2a44;
  --siyoh-2: #5a6384;
  --siyoh-3: #8a93ad;
  --chiziq: #e3e8f4;
  --chiziq-2: #d3dbec;

  /* ── Asosiy gradient ──────────────────────────────────────────── */
  --asosiy: #3b6cff;
  --asosiy-2: #7c4dff;
  --asosiy-grad: linear-gradient(135deg, #3b6cff 0%, #7c4dff 100%);
  --asosiy-och: #eaf1ff;
  --havola: #3b6cff;
  --fokus: #7c4dff;

  /* ── Ranglar oilasi ───────────────────────────────────────────── */
  --yashil: #22c55e;
  --yashil-grad: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  --yashil-och: #e9f9ef;

  --kok: #2f6bff;
  --kok-grad: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  --kok-och: #eaf1ff;

  --pushti: #ff4f8b;
  --pushti-grad: linear-gradient(135deg, #e11d63 0%, #ff7aa8 100%);
  --pushti-och: #ffeaf2;

  --sariq: #ff9f1a;
  --sariq-grad: linear-gradient(135deg, #f97316 0%, #ffb020 100%);
  --sariq-och: #fff3e0;

  --qizil: #f43f5e;
  --qizil-grad: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
  --qizil-och: #ffe9ee;

  --binafsha: #7c4dff;
  --binafsha-grad: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
  --binafsha-och: #f1ecff;

  --firuza: #14b8a6;
  --firuza-grad: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
  --firuza-och: #e6faf7;

  /* ── Sinflar ──────────────────────────────────────────────────── */
  --sinf-5: var(--yashil);  --sinf-5-grad: var(--yashil-grad);  --sinf-5-och: var(--yashil-och);
  --sinf-6: var(--kok);     --sinf-6-grad: var(--kok-grad);     --sinf-6-och: var(--kok-och);
  --sinf-7: var(--pushti);  --sinf-7-grad: var(--pushti-grad);  --sinf-7-och: var(--pushti-och);

  /* ── Darajalar (mijoz sxemasi: yashil / sariq / qizil) ────────── */
  --daraja-1: var(--yashil); --daraja-1-grad: var(--yashil-grad); --daraja-1-och: var(--yashil-och);
  --daraja-2: var(--sariq);  --daraja-2-grad: var(--sariq-grad);  --daraja-2-och: var(--sariq-och);
  --daraja-3: var(--qizil);  --daraja-3-grad: var(--qizil-grad);  --daraja-3-och: var(--qizil-och);

  /* ── Tipografika ──────────────────────────────────────────────── */
  --shrift: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Shakl ────────────────────────────────────────────────────── */
  --r-xl: 32px;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 14px;
  --r-xs: 10px;

  --kenglik: 1180px;
  --gutter: clamp(18px, 4vw, 36px);

  /* ── Soya va nur ──────────────────────────────────────────────── */
  --soya-karta: 0 1px 2px rgb(31 42 68 / 0.04), 0 18px 40px -28px rgb(59 108 255 / 0.35);
  --soya-kotar: 0 2px 4px rgb(31 42 68 / 0.04), 0 28px 56px -26px rgb(91 92 255 / 0.45);
  --soya-menyu: 0 24px 60px -20px rgb(31 42 68 / 0.28);
  --nur: 0 14px 30px -12px rgb(91 92 255 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  --nur-kotar: 0 20px 38px -12px rgb(91 92 255 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.3);

  --otish: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --sakrash: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Faqat egri chiziq: animatsiyada kechikish aniq yozilganda (--sakrash ichida vaqt ham bor) */
  --sakrash-egri: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Qorong'i rejim: tungi osmon ──────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fon: #0a0f24;
    --fon-2: #0e1430;
    --fon-osmon: radial-gradient(900px 500px at 80% 0%, rgb(124 77 255 / 0.22), transparent 70%),
                 radial-gradient(700px 400px at 0% 10%, rgb(59 108 255 / 0.2), transparent 70%), #0a0f24;
    --karta: #121936;
    --karta-2: #182044;
    --siyoh: #eef1fa;
    --siyoh-2: #a7b0cc;
    --siyoh-3: #7a84a6;
    --chiziq: #232c52;
    --chiziq-2: #2f3a68;
    --asosiy-och: #1c2654;
    --havola: #8fb0ff;

    --yashil-och: #10302a; --kok-och: #15244f; --pushti-och: #3a1631;
    --sariq-och: #3a2712;  --qizil-och: #3b1522; --binafsha-och: #251c4f; --firuza-och: #0f2f33;

    --soya-karta: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -28px rgb(0 0 0 / 0.8);
    --soya-kotar: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 28px 56px -24px rgb(91 92 255 / 0.45);
    --soya-menyu: 0 24px 60px -20px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme="dark"] {
  --fon: #0a0f24;
  --fon-2: #0e1430;
  --fon-osmon: radial-gradient(900px 500px at 80% 0%, rgb(124 77 255 / 0.22), transparent 70%),
               radial-gradient(700px 400px at 0% 10%, rgb(59 108 255 / 0.2), transparent 70%), #0a0f24;
  --karta: #121936;
  --karta-2: #182044;
  --siyoh: #eef1fa;
  --siyoh-2: #a7b0cc;
  --siyoh-3: #7a84a6;
  --chiziq: #232c52;
  --chiziq-2: #2f3a68;
  --asosiy-och: #1c2654;
  --havola: #8fb0ff;

  --yashil-och: #10302a; --kok-och: #15244f; --pushti-och: #3a1631;
  --sariq-och: #3a2712;  --qizil-och: #3b1522; --binafsha-och: #251c4f; --firuza-och: #0f2f33;

  --soya-karta: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -28px rgb(0 0 0 / 0.8);
  --soya-kotar: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 28px 56px -24px rgb(91 92 255 / 0.45);
  --soya-menyu: 0 24px 60px -20px rgb(0 0 0 / 0.7);
}