/* ==========================================================================
   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;

  /* Siyan — asosiy aksent (havolalar, faol holat, chegara nurlari) */
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;

  /* Binafsha — ikkinchi aksent (gradient juftligi, ikkilamchi belgilar) */
  --violet-300: #C4B5FD;
  --violet-400: #A855F7;
  --violet-500: #9333EA;
  --violet-600: #7E22CE;

  /* 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(34, 211, 238, 0.45);

  --accent: var(--cyan-400);
  --accent-strong: var(--cyan-500);
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-2: var(--violet-400);
  --accent-2-soft: rgba(168, 85, 247, 0.14);

  --success: var(--emerald-400);
  --success-soft: rgba(52, 211, 153, 0.12);
  --success-text: var(--emerald-400);
  --warning: var(--amber-400);
  --warning-soft: rgba(251, 191, 36, 0.12);
  --warning-text: var(--amber-400);
  --error: var(--rose-400);
  --error-soft: rgba(251, 113, 133, 0.14);
  --error-text: var(--rose-400);
  --info: var(--cyan-400);
  --info-soft: rgba(34, 211, 238, 0.12);
  --info-text: var(--cyan-300);

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

  /* Gradientlar */
  --gradient-accent: linear-gradient(135deg, #22D3EE 0%, #A855F7 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(168, 85, 247, 0.18) 100%);
  --gradient-cta: linear-gradient(135deg, #22D3EE 0%, #06B6D4 55%, #0891B2 100%);
  --gradient-cta-hover: linear-gradient(135deg, #67E8F9 0%, #22D3EE 55%, #06B6D4 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(34, 211, 238, 0.35), 0 8px 28px rgba(34, 211, 238, 0.22);
  --glow-accent-strong: 0 0 0 1px rgba(34, 211, 238, 0.55), 0 12px 38px rgba(34, 211, 238, 0.35);

  /* 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: #22D3EE;
  --chart-2: #A855F7;
  --chart-3: #34D399;
  --chart-4: #FBBF24;
  --chart-5: #FB7185;
  --chart-6: #60A5FA;
  --chart-7: #F472B6;

  /* --- 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(--cyan-400);
  --color-primary-dark: var(--cyan-600);
  --color-cta: var(--cyan-500);
  --color-cta-light: var(--cyan-400);
  --color-cta-dark: var(--cyan-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(--rose-400);
  --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(34, 211, 238, 0.35);
    --glow-accent-strong: 0 0 0 1px rgba(34, 211, 238, 0.55);
  }
}