/* ==========================================================================
   IT WEEK — dizayn tokenlari.
   --------------------------------------------------------------------------
   UCHTA QATLAM:
     1. Xom palitra (--ink-*, --cyan-*, --violet-*) — "bo'yoq banki".
     2. Semantik tokenlar (--surface, --text, --accent...) — komponentlar
        FAQAT shulardan foydalanadi.
     3. Moslik aliaslari (--color-*) — admin panel uslublari uchun.

   Nega uch qatlam: rangni almashtirish kerak bo'lsa (masalan siyan o'rniga
   yashil), faqat 2-qatlamdagi bir nechta qator o'zgaradi va butun sayt
   ergashadi. Komponentlar xom palitraga tegsa, har o'zgarishda yuzlab
   joyni qidirib chiqish kerak bo'lardi.

   TO'Q MAVZU ASOSIY: sayt doim to'q (robotexnika/texnologiya ko'rinishi),
   shu sababli `prefers-color-scheme` bo'yicha almashinuv YO'Q — aks holda
   kunduzgi rejimda brauzer fonni oqartirib, neon aksentlar o'qilmas bo'lib
   qolardi.
   ========================================================================== */

:root {
  /* --- 1. XOM PALITRA -------------------------------------------------- */

  /* Ink — fon va sirtlar (eng to'qdan eng yorug'gacha) */
  --ink-950: #05070F;
  --ink-900: #080B14;
  --ink-850: #0B1020;
  --ink-800: #111729;
  --ink-700: #161E33;
  --ink-600: #1D2742;
  --ink-500: #273352;
  --ink-400: #38476B;
  --ink-300: #5A6C94;
  --ink-200: #93A4C3;
  --ink-100: #C6D1E5;
  --ink-50:  #E8EDF7;

  /* ------------------------------------------------------------------
     DG PALITRASI — raqamli-avlod-logo-reference.svg dan AYNAN olingan.
     Logotipdagi oltita rang: ko'k ramka va beshta "ekvalayzer" ustuni.
     Shu sababli yo'nalish kartalari ham aynan shu ranglarda — sayt
     brendning o'z palitrasidan tashqariga chiqmaydi.
     ------------------------------------------------------------------ */

  /* Ko'k — DG ning asosiy rangi. #3C60A8 (yozuv) va #5C8ABD (ramka)
     to'q fonda juda qorong'i, shu sababli AKSENT uchun yorug'roq
     pog'onalar qo'shilgan: to'q fonda o'qilishi kerak bo'lgan matn va
     chegara #3C60A8 da ko'rinmay qolardi (kontrast 2:1 dan past). */
  --dg-blue-200: #C3D6F0;
  --dg-blue-300: #9DBCE6;
  --dg-blue-400: #7BA3DC;   /* to'q fondagi asosiy aksent */
  --dg-blue-500: #5C8ABD;   /* logotip ramkasi */
  --dg-blue-600: #4A74B5;
  --dg-blue-700: #3C60A8;   /* logotip yozuvi */
  --dg-blue-800: #2E4B85;
  --dg-blue-900: #223962;

  /* Logotipning qolgan beshta rangi — yo'nalishlar va diagrammalar uchun */
  --dg-yellow: #F7DA10;
  --dg-green:  #64C168;
  --dg-orange: #E58227;
  --dg-purple: #964195;
  --dg-red:    #D10D3A;

  /* To'q fonda ishlatish uchun yorug'roq variantlari */
  --dg-yellow-soft: #FBE75E;
  --dg-green-soft:  #8FD693;
  --dg-orange-soft: #F0A45E;
  --dg-purple-soft: #BE7ABD;
  --dg-red-soft:    #E8526F;

  /* Holat ranglari */
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-700: #047857;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-700: #B45309;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --rose-700: #BE123C;

  /* --- 2. SEMANTIK TOKENLAR ------------------------------------------- */

  --surface-page: var(--ink-900);
  --surface: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-input: rgba(255, 255, 255, 0.04);
  --surface-overlay: rgba(5, 7, 15, 0.82);

  --text: var(--ink-50);
  --text-secondary: var(--ink-100);
  --text-muted: var(--ink-200);
  --text-faint: var(--ink-300);
  --text-on-accent: #04121A;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(123, 163, 220, 0.48);

  --accent: var(--dg-blue-400);
  --accent-strong: var(--dg-blue-500);
  --accent-soft: rgba(123, 163, 220, 0.14);
  --accent-2: var(--dg-purple-soft);
  --accent-2-soft: rgba(190, 122, 189, 0.16);

  --success: var(--dg-green-soft);
  --success-soft: rgba(143, 214, 147, 0.14);
  --success-text: var(--dg-green-soft);
  --warning: var(--dg-yellow-soft);
  --warning-soft: rgba(251, 231, 94, 0.14);
  --warning-text: var(--dg-yellow-soft);
  --error: var(--dg-red-soft);
  --error-soft: rgba(232, 82, 111, 0.16);
  --error-text: var(--dg-red-soft);
  --info: var(--dg-blue-400);
  --info-soft: rgba(123, 163, 220, 0.14);
  --info-text: var(--dg-blue-300);

  --focus-ring: var(--dg-blue-400);
  --input-placeholder: var(--ink-300);

  /* Gradientlar */
  /* Sarlavha gradienti — logotipdagi ko'kdan binafshaga, ya'ni
     ekvalayzer ustunlari tartibini takrorlaydi. */
  --gradient-accent: linear-gradient(135deg, #9DBCE6 0%, #7BA3DC 45%, #BE7ABD 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(123, 163, 220, 0.20) 0%, rgba(190, 122, 189, 0.18) 100%);
  --gradient-cta: linear-gradient(135deg, #7BA3DC 0%, #5C8ABD 55%, #4A74B5 100%);
  --gradient-cta-hover: linear-gradient(135deg, #9DBCE6 0%, #7BA3DC 55%, #5C8ABD 100%);
  --gradient-sheen: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 55%, transparent 100%);

  /* Soyalar va nurlar */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.52);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 1px rgba(123, 163, 220, 0.38), 0 8px 28px rgba(92, 138, 189, 0.26);
  --glow-accent-strong: 0 0 0 1px rgba(123, 163, 220, 0.6), 0 12px 38px rgba(92, 138, 189, 0.4);

  /* Radius va oraliq */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Diagramma ranglari (statistika) — to'q fonda ajralib turadigan
     tartibda: har qo'shni juftlik ham rang, ham yorqinlik bilan farq
     qiladi, shu sababli rangni ajratmaydigan odam ham o'qiy oladi. */
  --chart-1: #7BA3DC;
  --chart-2: #FBE75E;
  --chart-3: #8FD693;
  --chart-4: #F0A45E;
  --chart-5: #BE7ABD;
  --chart-6: #E8526F;
  --chart-7: #C3D6F0;

  /* --- 3. MOSLIK ALIASLARI -------------------------------------------- */
  /* Admin panel uslublari shu nomlardan foydalanadi. Ular yuqoridagi
     semantik tokenlarga ishora qiladi — ya'ni mavzu bir joyda
     o'zgarganda admin panel ham ergashadi. */
  --color-primary: var(--dg-blue-400);
  --color-primary-dark: var(--dg-blue-700);
  --color-cta: var(--dg-blue-500);
  --color-cta-light: var(--dg-blue-400);
  --color-cta-dark: var(--dg-blue-700);
  --color-cta-ink: var(--text-on-accent);
  --color-ink: var(--text);
  --color-ink-soft: var(--text-secondary);
  --color-bg: var(--surface-page);
  --color-card: var(--surface);
  --color-muted: var(--text-muted);
  --color-border: var(--border);
  --color-danger: var(--dg-red-soft);
  --radius: var(--radius-md);
  --shadow: var(--shadow-lg);
}

/* Harakatni kamaytirish so'ralganda — nurlanish va aylanish o'chadi
   (ular bu dizaynda eng ko'p harakat qiladigan qism). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --glow-accent: 0 0 0 1px rgba(123, 163, 220, 0.38);
    --glow-accent-strong: 0 0 0 1px rgba(123, 163, 220, 0.6);
  }
}