/* =====================================================================
   tokens.css — yagona manba. Komponentlar faqat shu o'zgaruvchilarni o'qiydi.
   Hech qayerda xom hex yozilmaydi.

   OssonEdu dizayn tizimi — "Premium Light".
   Oq yuza, qatlamli yumshoq soyalar, aniq ierarxiya, mayin harakat.
   Mos yo'nalish: Linear / Stripe / Vercel darajasidagi SaaS estetikasi.
   ===================================================================== */

@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  /* --- Neytral ramp (sovuq kulrang) -------------------------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F8F9FB;
  --n-100: #F1F3F7;
  --n-200: #E7EAF0;
  --n-300: #D6DAE3;
  --n-400: #9FA7B6;
  --n-500: #6B7484;
  --n-600: #4A5263;
  --n-700: #343B49;
  --n-800: #222835;
  --n-900: #131823;

  /* --- Yuzalar -----------------------------------------------------
     Sahifa OQ. Kartalar ham oq, lekin nozik chegara + qatlamli soya
     bilan ajraladi — kulrang fon bilan emas. Shu "premium" tuyg'u
     beradi: yuzalar toza, chuqurlik soya orqali. */
  --surface-page:  var(--n-0);
  --surface-card:  var(--n-0);
  --surface-sunk:  var(--n-50);
  --surface-hover: var(--n-50);
  --surface-elev:  var(--n-0);

  /* --- Matn ------------------------------------------------------- */
  --text:          var(--n-900);
  --text-soft:     var(--n-500);
  --text-faint:    var(--n-400);
  --text-on-dark:  var(--n-0);

  /* --- Chegaralar ------------------------------------------------- */
  --line:          var(--n-200);
  --line-soft:     var(--n-100);
  --line-strong:   var(--n-300);

  /* --- Semantik ranglar: MARKAZGA BOG'LIQ EMAS --------------------
     To'langan/qarzdor, keldi/kelmadi hamma markazda bir xil. */
  --ok:       #17784B;
  --ok-tint:  #E7F5ED;
  --warn:     #8A5A00;
  --warn-tint:#FCF1DC;
  --bad:      #B02318;
  --bad-tint: #FCE9E7;
  --info:     #1B5FA8;
  --info-tint:#E8F1FB;

  /* --- Accent (preset bilan qayta yoziladi) ------------------------ */
  --accent:       #1858A8;
  --accent-hover: #123F79;
  --accent-tint:  #EAF2FC;
  --accent-ring:  rgba(24, 88, 168, .22);
  --on-accent:    #FFFFFF;

  /* --- Brend ikkilamchi ranglari (logotipdan ilhomlangan, lekin
     ko'zga yumshoq tegishi uchun to'yinganligi pasaytirilgan) --------
     Markaz preset'idan mustaqil — sof bezak uchun: statistika
     nishonlari, gradient banner, progress rasmlar. Har doim bir xil,
     markaz o'z accent rangini o'zgartirsa ham. */
  --brand-blue:      #2E6FB0;
  --brand-navy:      #1B4A7E;
  --brand-teal:      #1FA98C;
  --brand-teal-soft: #4DBBA3;
  --brand-teal-hover:#158972;
  --brand-teal-tint: #E7F6F2;
  --brand-teal-ring: rgba(31, 169, 140, .18);
  --brand-violet:      #7C74D6;
  --brand-violet-tint: #EFEDFB;
  --brand-amber:       #D9A441;
  --brand-amber-tint:  #FBF3E3;

  /* --- Tipografiya ------------------------------------------------- */
  --font: 'Inter', 'Golos Text', system-ui, 'Segoe UI', Roboto, sans-serif;

  --size-xs:   12px;
  --size-sm:   13px;
  --size-base: 15px;
  --size-md:   16px;
  --size-lg:   19px;
  --size-xl:   25px;
  --size-2xl:  32px;
  --size-3xl:  40px;

  --leading-tight: 1.2;
  --leading-body:  1.55;

  --tracking-tight:  -0.014em;
  --tracking-tighter:-0.022em;
  --tracking-wide:    0.04em;

  /* --- Radius ------------------------------------------------------ */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* --- Soyalar — qatlamli, premium ---------------------------------
     Ikki qatlam: yaqin aniq soya + uzoq yumshoq soya. Bitta katta
     xira soya "arzon" ko'rinadi, qatlamli soya chuqurlikni haqiqiy
     qiladi. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .07), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, .09), 0 4px 8px -4px rgba(16, 24, 40, .04);
  --shadow-xl: 0 24px 40px -10px rgba(16, 24, 40, .13), 0 8px 16px -8px rgba(16, 24, 40, .06);

  /* Eski nomlar — mavjud kod buzilmasin */
  --shadow-card: var(--shadow-sm);
  --shadow-pop:  var(--shadow-xl);

  /* --- Shisha qatlam (faqat sticky panel va modal uchun) ----------- */
  --glass-bg:        rgba(255, 255, 255, .82);
  --glass-bg-strong: rgba(255, 255, 255, .92);
  --glass-border:    var(--n-200);
  --glass-blur:      18px;

  --focus: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--accent-ring);

  /* --- Harakat -----------------------------------------------------
     Uch tezlik: bosish javobi (fast), holat o'zgarishi (dur),
     kirish/chiqish (slow). Spring faqat "tirik" his kerak joyda. */
  --dur-fast:   110ms;
  --dur:        180ms;
  --dur-slow:   320ms;
  --dur-slower: 520ms;
  --ease:        cubic-bezier(.22, .8, .28, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .58, 1);

  /* --- Tuzilma ----------------------------------------------------- */
  --sidebar-w: 244px;
  --topbar-h:  60px;

  /* Brauzerning o'z vidjetlari (sana tanlash, avtoto'ldirish, scrollbar)
     ham yorug' bo'lsin — tizim qorong'i rejimida bo'lsa ham. */
  color-scheme: light;
}

/* =====================================================================
   ACCENT PRESETLARI
   centers.accent ustuni 'blue' | 'teal' | ... qiymatini saqlaydi.
   ===================================================================== */
[data-accent="blue"]   { --accent:#1858A8; --accent-hover:#123F79; --accent-tint:#EAF2FC; --accent-ring:rgba(24,88,168,.22);  --on-accent:#fff; }
[data-accent="teal"]   { --accent:#0F6B5B; --accent-hover:#0B5145; --accent-tint:#E5F3F0; --accent-ring:rgba(15,107,91,.22);  --on-accent:#fff; }
[data-accent="indigo"] { --accent:#4740AC; --accent-hover:#383293; --accent-tint:#EDECFA; --accent-ring:rgba(71,64,172,.22);  --on-accent:#fff; }
[data-accent="clay"]   { --accent:#95421C; --accent-hover:#793517; --accent-tint:#F9EDE7; --accent-ring:rgba(149,66,28,.22);  --on-accent:#fff; }
[data-accent="plum"]   { --accent:#8E3159; --accent-hover:#74274A; --accent-tint:#F9EAF0; --accent-ring:rgba(142,49,89,.22);  --on-accent:#fff; }
[data-accent="olive"]  { --accent:#4E6D17; --accent-hover:#405913; --accent-tint:#F0F4E5; --accent-ring:rgba(78,109,23,.22);  --on-accent:#fff; }
[data-accent="amber"]  { --accent:#8B5906; --accent-hover:#714805; --accent-tint:#FAF0DC; --accent-ring:rgba(139,89,6,.22);   --on-accent:#fff; }
[data-accent="slate"]  { --accent:#474C55; --accent-hover:#373B43; --accent-tint:#EFF0F2; --accent-ring:rgba(71,76,85,.22);   --on-accent:#fff; }

/* =====================================================================
   ZICHLIK
   compact = admin paneli (sichqoncha, ko'p ma'lumot)
   cozy    = Mini App (barmoq, 44px minimal tegish maydoni)
   ===================================================================== */
[data-density="compact"] {
  --row-h:     42px;
  --control-h: 36px;
  --tap-min:   36px;
  --pad-x:     14px;
  --pad-y:     9px;
  --gap:       12px;
  --text-size: var(--size-sm);
}

[data-density="cozy"] {
  --row-h:     52px;
  --control-h: 46px;
  --tap-min:   44px;
  --pad-x:     16px;
  --pad-y:     12px;
  --gap:       14px;
  --text-size: var(--size-base);
}

/* Telefonda admin paneli ham cozy bo'ladi — o'qituvchi davomatni
   telefondan belgilaydi va kichik qator barmoq uchun noqulay. */
@media (max-width: 640px) {
  [data-density="compact"] {
    --row-h:     50px;
    --control-h: 44px;
    --tap-min:   44px;
    --pad-x:     14px;
    --text-size: var(--size-base);
  }
}

/* =====================================================================
   QORONG'I REJIM — ixtiyoriy, foydalanuvchi o'zi yoqadi.
   Standart holat YORUG' (layout.php JS tizimga ergashmaydi).
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:  #0C1017;
  --surface-card:  #141A24;
  --surface-sunk:  #10151D;
  --surface-hover: #1C2431;
  --surface-elev:  #1A212C;

  --text:       #E9ECF1;
  --text-soft:  #99A2B2;
  --text-faint: #6A7385;

  --line:        #242C39;
  --line-soft:   #1C2330;
  --line-strong: #333D4D;

  --ok-tint:   #10291D;
  --warn-tint: #2C2411;
  --bad-tint:  #2E1917;
  --info-tint: #12243A;

  --glass-bg:        rgba(20, 26, 36, .72);
  --glass-bg-strong: rgba(20, 26, 36, .88);
  --glass-border:    #242C39;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 20px -6px rgba(0, 0, 0, .5), 0 4px 8px -4px rgba(0, 0, 0, .3);
  --shadow-xl: 0 24px 40px -10px rgba(0, 0, 0, .6), 0 8px 16px -8px rgba(0, 0, 0, .4);
}

[data-theme="dark"][data-accent="blue"]   { --accent:#5B9BDB; --accent-hover:#7FB2E5; --accent-tint:#152840; --accent-ring:rgba(91,155,219,.3); --on-accent:#08131F; }
[data-theme="dark"][data-accent="teal"]   { --accent:#4FB59B; --accent-hover:#6CC5AE; --accent-tint:#12302A; --accent-ring:rgba(79,181,155,.3); --on-accent:#0A2621; }
[data-theme="dark"][data-accent="indigo"] { --accent:#8B85DD; --accent-hover:#A29DE6; --accent-tint:#22203D; --accent-ring:rgba(139,133,221,.3); --on-accent:#1A1832; }
[data-theme="dark"][data-accent="clay"]   { --accent:#D4805C; --accent-hover:#E09877; --accent-tint:#3A2419; --accent-ring:rgba(212,128,92,.3); --on-accent:#2E1B12; }
[data-theme="dark"][data-accent="plum"]   { --accent:#D2789C; --accent-hover:#DE93B0; --accent-tint:#38202B; --accent-ring:rgba(210,120,156,.3); --on-accent:#2B1721; }
[data-theme="dark"][data-accent="olive"]  { --accent:#9CBC5E; --accent-hover:#B0CB79; --accent-tint:#26301A; --accent-ring:rgba(156,188,94,.3); --on-accent:#1C2513; }
[data-theme="dark"][data-accent="amber"]  { --accent:#D6A249; --accent-hover:#E2B568; --accent-tint:#362A15; --accent-ring:rgba(214,162,73,.3); --on-accent:#2A200F; }
[data-theme="dark"][data-accent="slate"]  { --accent:#A3A39A; --accent-hover:#B8B8AF; --accent-tint:#2E2E2B; --accent-ring:rgba(163,163,154,.3); --on-accent:#232320; }

/* =====================================================================
   TELEGRAM MINI APP
   Telegram o'z mavzusini --tg-theme-* orqali uzatadi.
   ===================================================================== */
.tg-app {
  --surface-page: var(--tg-theme-secondary-bg-color, var(--n-50));
  --surface-card: var(--tg-theme-bg-color, var(--n-0));
  --text:         var(--tg-theme-text-color, var(--n-900));
  --text-soft:    var(--tg-theme-hint-color, var(--n-500));
}

/* =====================================================================
   BAZA
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-size, var(--size-base));
  line-height: var(--leading-body);
  font-feature-settings: 'tnum' 1, 'cv05' 1;  /* raqamlar ustunda qalqimasin */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-tint); color: var(--accent-hover); }

/* Nozik scrollbar — tizim scrollbari premium yuzada qo'pol ko'rinadi. */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}