/* ============================================================
   Yoshlar Muhandislik Platformasi — dizayn tokenlari (v1)
   Qoida: ranglar, shriftlar, oraliqlar, radiuslar, soyalar va qatlamlar
   kodda to'g'ridan-to'g'ri yozilmaydi — faqat shu tokenlar orqali.
   Yangi qiymat kerak bo'lsa — avval shu yerga token qo'shiladi.
   Namuna sahifa: /design.html
   ============================================================ */
:root{
  /* ---------- Brend ---------- */
  --brand-blue:#2F9BF0;          /* asosiy ko'k (ilova) */
  --brand-blue-deep:#1560C4;     /* gradientlarning to'q uchi */
  --brand-navy:#1B2A4A;          /* logotip, sarlavhalar */
  --brand-yellow:#F0C830;        /* chizmachilik aksenti, «tez kunda» */
  --brand-gradient:linear-gradient(135deg,#5DAAFB 0%,#1560C4 100%);

  /* ---------- Neytral (fon, sirt, chiziq, matn) ---------- */
  --color-bg:#F3F2EC;            /* sahifa foni (iliq qog'oz) */
  --color-surface:#FFFFFF;       /* kartochka, oyna, maydon */
  --color-surface-2:#F8F7F3;     /* ichki blok, hover */
  --color-border:#E1DFD4;
  --color-border-strong:#C9C6B8;
  --color-text:#1B2A4A;
  --color-text-muted:#5B6B7C;
  --color-text-faint:rgba(91,107,124,.55);
  --color-overlay:rgba(27,42,74,.5); /* oyna orqasidagi qoplama */

  /* ---------- Asosiy (interaktiv) rang ---------- */
  --color-primary:var(--brand-blue);
  --color-primary-hover:#1F88DC;
  --color-primary-active:#1A74C2;
  --color-primary-soft:#E6F3FF;  /* tanlangan fon, yorliq foni */
  --color-primary-text:#1F7FD0;  /* och fon ustidagi ko'k matn */
  --color-on-primary:#FFFFFF;

  /* ---------- Ma'noli ranglar ---------- */
  --color-success:#3F7D58;  --color-success-soft:#E1EDE5;
  --color-warning:#A8790C;  --color-warning-soft:#FCF0CC;
  --color-danger:#C0392B;   --color-danger-soft:#FBE0DE;
  --color-info:#2B6CB0;     --color-info-soft:#DCEAF7;
  --color-purple:#6A4FA0;   --color-purple-soft:#EAE3F5;

  /* ---------- Kategoriya ranglari (sinf, guruh, kurs belgilari) ---------- */
  --cat-1:#2F80D0; --cat-2:#7B61FF; --cat-3:#E8590C; --cat-4:#0CA678;
  --cat-5:#D6336C; --cat-6:#1098AD; --cat-7:#F08C00; --cat-8:#5C7CFA;

  /* ---------- Metallar (sertifikat darajalari, ordenlar) ---------- */
  --metal-bronze:#B87333; --metal-silver:#A8B2BD; --metal-gold:#D4A017;
  --metal-platinum:#8FA3B8; --metal-diamond:#5BC0EB;

  /* ---------- Shriftlar ---------- */
  --font-display:'Space Grotesk',system-ui,sans-serif;   /* sarlavhalar, raqamlar */
  --font-body:'IBM Plex Sans',system-ui,sans-serif;      /* asosiy matn */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;    /* kod, sinf kodi, sana */
  --font-serif:'Source Serif 4',Georgia,serif;           /* faqat uzun maqolalar */

  /* ---------- Matn o'lchamlari ---------- */
  --text-xs:12px;  --text-sm:13px;  --text-base:14px; --text-md:16px; --text-lg:18px;
  --text-xl:22px;  --text-2xl:28px; --text-3xl:36px;  --text-4xl:48px; --text-5xl:64px;
  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5; --leading-relaxed:1.65;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* ---------- Oraliqlar (4 px to'r) ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-14:56px; --space-18:72px;

  /* ---------- Burchak radiuslari (faqat shu 5 tasi) ---------- */
  --radius-sm:6px;     /* kichik tugma, yorliq ichidagi element */
  --radius-md:10px;    /* tugma, maydon, kichik kartochka */
  --radius-lg:14px;    /* kartochka, oyna */
  --radius-xl:20px;    /* katta panel, bosh sahifa bloklari */
  --radius-full:999px; /* chip, avatar, yumaloq tugma */

  /* ---------- Soyalar (3 daraja) ---------- */
  --shadow-sm:0 1px 2px rgba(27,42,74,.06),0 1px 3px rgba(27,42,74,.06);  /* kartochka */
  --shadow-md:0 8px 24px rgba(27,42,74,.12);                               /* ochiluvchi menyu, hover */
  --shadow-lg:0 20px 50px rgba(27,42,74,.22);                              /* oyna */

  /* ---------- Fokus ---------- */
  --focus-ring:0 0 0 3px rgba(47,155,240,.38);

  /* ---------- Qatlamlar (z-index) ---------- */
  --z-raised:1;      /* kartochka ichidagi ustki element */
  --z-sticky:20;     /* yopishqoq sarlavha, qidiruv */
  --z-header:40;     /* yuqori panel */
  --z-drawer:45;     /* telefonda to'liq ekran chat, yon menyu */
  --z-modal:100;     /* oyna */
  --z-modal-2:110;   /* oyna ustidagi ikkinchi oyna */
  --z-popover:900;   /* reaksiya tanlagich, ochiluvchi menyu */
  --z-toast:1000;    /* bildirish xabari */

  /* ---------- Harakat ---------- */
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ---------- O'lchamlar ---------- */
  --control-sm:30px; --control-md:38px; --control-lg:46px;  /* tugma va maydon balandligi */
  --tap-min:44px;                                         /* telefonda eng kichik bosiladigan joy */
  /* Ekran chegaralari (media query'larda o'zgaruvchi ishlamaydi, qiymatni yozing):
     telefon ≤ 640px · planshet ≤ 900px · katta ekran ≥ 1200px */

  color-scheme:light;
}

/* ---------- Tungi rejim (tayyor, hozircha yoqilmagan) ----------
   <html data-theme="dark"> bilan yoqiladi. Modullardagi qattiq yozilgan ranglar
   tokenlarga ko'chirilgandan keyin (2-bosqich) foydalanuvchiga ochiladi. */
:root[data-theme="dark"]{
  --color-bg:#0F1626; --color-surface:#172036; --color-surface-2:#1D2840;
  --color-border:#2A3651; --color-border-strong:#3A4868;
  --color-text:#E6ECF5; --color-text-muted:#A3B0C4; --color-text-faint:rgba(163,176,196,.55);
  --color-overlay:rgba(4,8,18,.66);
  --color-primary:#4AA8F5; --color-primary-hover:#63B5F7; --color-primary-active:#2F9BF0;
  --color-primary-soft:#173252; --color-primary-text:#7CC0F8;
  --color-success:#4CC07F; --color-success-soft:#14322A;
  --color-warning:#E0B23B; --color-warning-soft:#3A2F12;
  --color-danger:#F06A5C;  --color-danger-soft:#3D1D1C;
  --color-info:#6FA8E6;    --color-info-soft:#16304E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- Umumiy qoidalar ---------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus-ring);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}