/* ============================================================
   OLAM MARKET panel — dizayn tokenlari (insightx "Zakaz Panel"
   tizimidan moslashtirilgan). Komponentlar FAQAT shu
   o'zgaruvchilardan foydalanadi: rang, bo'shliq, shrift, soya.
   Mavzu ustuvorligi: <html data-theme> > OS afzalligi > light.
   ============================================================ */
:root {
  /* --- Bazaviy palitralar --- */
  --navy-950: #0b1220;
  --navy-900: #0f172a;
  --navy-850: #121c30;
  --navy-800: #1f2949;
  --navy-700: #2a3760;

  --blue-50: #eef3ff;
  --blue-100: #dbe6ff;
  --blue-200: #bcd0ff;
  --blue-300: #8fb0ff;
  --blue-400: #5d89f5;
  --blue-500: #3b82f6;
  --blue-600: #2f5fd6;
  --blue-700: #2549a8;
  --blue-800: #213c85;
  --indigo-500: #6366f1;
  --violet-500: #8b5cf6;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;

  --slate-50: #f6f8fc;
  --slate-100: #eef1f7;
  --slate-200: #e2e7f0;
  --slate-300: #cdd5e3;
  --slate-400: #9aa6be;
  --slate-500: #6c7890;
  --slate-600: #4d586e;
  --slate-700: #374152;
  --slate-800: #232b3a;
  --slate-900: #151b27;
  --white: #ffffff;

  --green-50: #e8f7ee;
  --green-400: #34c274;
  --green-600: #178049;
  --green-700: #126039;
  --amber-50: #fdf3da;
  --amber-400: #f2ab2e;
  --amber-600: #bd7a08;
  --amber-700: #92600a;
  --red-50: #fdeae8;
  --red-400: #f87171;
  --red-500: #e2483d;
  --red-600: #c93a30;
  --red-700: #a12c24;
  --sky-50: #e7f3fb;
  --sky-400: #38bdf8;
  --sky-600: #1f78ba;
  --sky-700: #1a6097;
  --gold-500: #d4af37;
  --orange-400: #fb923c;
  --yellow-400: #fbbf24;
  --emerald-400: #34d399;

  /* --- Semantik: sirtlar --- */
  --bg-app: var(--slate-50);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-hover: var(--slate-100);
  --surface-raised: var(--white);
  --surface-overlay: rgba(15, 23, 42, 0.55);
  --surface-input: var(--slate-50);
  --dot-pattern: rgba(47, 95, 214, 0.055);
  --main-glow: rgba(255, 255, 255, 0.5);

  /* --- Matn --- */
  --text-strong: var(--slate-900);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-on-accent: var(--white);
  --text-link: var(--blue-600);

  /* --- Chegara --- */
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);

  /* --- Aksent --- */
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-active: var(--blue-800);
  --accent-soft: var(--blue-50);
  --accent-ring: rgba(47, 95, 214, 0.30);
  --accent-gradient: linear-gradient(135deg, var(--blue-500) 0%, var(--indigo-500) 60%, var(--violet-500) 100%);
  --accent-line: linear-gradient(90deg, var(--accent), var(--blue-400));

  /* --- Holat ranglari --- */
  --success: var(--green-600);
  --success-soft: var(--green-50);
  --success-text: var(--green-700);
  --warning: var(--amber-600);
  --warning-soft: var(--amber-50);
  --warning-text: var(--amber-700);
  --danger: var(--red-600);
  --danger-hover: var(--red-700);
  --danger-soft: var(--red-50);
  --danger-text: var(--red-700);
  --info: var(--sky-600);
  --info-soft: var(--sky-50);
  --info-text: var(--sky-700);

  /* --- Navigatsiya (sidebar/topbar doim qorong'i — ikkala mavzuda) --- */
  --nav-bg: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  --nav-glow: radial-gradient(120% 60% at 0% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 55%);
  --nav-topbar-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(11, 18, 32, 0.9) 100%);
  --nav-border: rgba(148, 163, 184, 0.10);
  --nav-border-strong: rgba(148, 163, 184, 0.20);
  --nav-hover: rgba(148, 163, 184, 0.08);
  --nav-text: #e2e8f0;
  --nav-text-strong: #f8fafc;
  --nav-text-muted: #94a3b8;
  --nav-text-dim: #64748b;
  --nav-accent: var(--blue-500);
  --nav-accent-bright: #60a5fa;
  --nav-active-bg: linear-gradient(90deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.05) 60%, transparent 100%);
  --nav-active-ring: rgba(59, 130, 246, 0.22);
  --nav-active-glow: rgba(59, 130, 246, 0.45);
  --nav-danger: var(--red-400);
  --nav-danger-soft: rgba(239, 68, 68, 0.12);
  --nav-danger-border: rgba(239, 68, 68, 0.35);
  --nav-moon: var(--yellow-400);
  --nav-sun: var(--orange-400);
  --nav-theme-ring: rgba(167, 139, 250, 0.22);
  --nav-kassa: var(--emerald-400);
  --nav-kassa-soft: rgba(52, 211, 153, 0.12);
  --nav-kassa-border: rgba(52, 211, 153, 0.30);
  --nav-avatar-ring: var(--gold-500);
  --nav-avatar-glow: rgba(212, 175, 55, 0.45);
  --table-head-bg: var(--navy-900);
  --table-head-text: #eaeefb;

  /* --- Bo'shliq (8px to'r: 4·8·12·16·24·32·48·64) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* --- Radius --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- Soyalar --- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --shadow-accent: 0 6px 16px -6px rgba(59, 130, 246, 0.55);

  /* --- Shriftlar (o'lchamlar — faqat clamp) --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-2xs: clamp(0.65rem, 0.63rem + 0.08vw, 0.6875rem);
  --fs-xs: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);
  --fs-sm: clamp(0.75rem, 0.73rem + 0.12vw, 0.8125rem);
  --fs-base: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);
  --fs-md: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --fs-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-xl: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-2xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-3xl: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Maket --- */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 76px;
  --control-h: 38px;
  --control-h-sm: 30px;

  /* --- Harakat --- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
}

/* ---------- Tungi mavzu: faqat semantik qiymatlar qayta beriladi ---------- */
:root[data-theme="dark"] {
  --bg-app: #0b1220;
  --surface-card: #121c30;
  --surface-sunken: #0e1728;
  --surface-hover: #1b2742;
  --surface-raised: #16223a;
  --surface-overlay: rgba(2, 6, 23, 0.7);
  --surface-input: #0e1728;
  --dot-pattern: rgba(96, 165, 250, 0.06);
  --main-glow: rgba(59, 130, 246, 0.06);
  --text-strong: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-link: var(--blue-300);
  --border-subtle: rgba(148, 163, 184, 0.14);
  --border-default: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.35);
  --accent: var(--blue-400);
  --accent-hover: var(--blue-300);
  --accent-active: var(--blue-200);
  --accent-soft: rgba(93, 137, 245, 0.16);
  --accent-ring: rgba(93, 137, 245, 0.40);
  --success: var(--green-400);
  --success-soft: rgba(52, 194, 116, 0.16);
  --success-text: #4ade80;
  --warning: var(--amber-400);
  --warning-soft: rgba(242, 171, 46, 0.16);
  --warning-text: #fbbf24;
  --danger: var(--red-500);
  --danger-hover: var(--red-400);
  --danger-soft: rgba(226, 72, 61, 0.18);
  --danger-text: #f87171;
  --info: var(--sky-400);
  --info-soft: rgba(43, 143, 214, 0.18);
  --info-text: #7dd3fc;
  --table-head-bg: #0e1728;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.60);
}

/* JS ishlamasa: OS afzalligi (aniq "light" tanlanmagan bo'lsa) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #0b1220;
    --surface-card: #121c30;
    --surface-sunken: #0e1728;
    --surface-hover: #1b2742;
    --surface-raised: #16223a;
    --surface-overlay: rgba(2, 6, 23, 0.7);
    --surface-input: #0e1728;
    --dot-pattern: rgba(96, 165, 250, 0.06);
    --main-glow: rgba(59, 130, 246, 0.06);
    --text-strong: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-link: var(--blue-300);
    --border-subtle: rgba(148, 163, 184, 0.14);
    --border-default: rgba(148, 163, 184, 0.22);
    --border-strong: rgba(148, 163, 184, 0.35);
    --accent: var(--blue-400);
    --accent-hover: var(--blue-300);
    --accent-active: var(--blue-200);
    --accent-soft: rgba(93, 137, 245, 0.16);
    --accent-ring: rgba(93, 137, 245, 0.40);
    --success: var(--green-400);
    --success-soft: rgba(52, 194, 116, 0.16);
    --success-text: #4ade80;
    --warning: var(--amber-400);
    --warning-soft: rgba(242, 171, 46, 0.16);
    --warning-text: #fbbf24;
    --danger: var(--red-500);
    --danger-hover: var(--red-400);
    --danger-soft: rgba(226, 72, 61, 0.18);
    --danger-text: #f87171;
    --info: var(--sky-400);
    --info-soft: rgba(43, 143, 214, 0.18);
    --info-text: #7dd3fc;
    --table-head-bg: #0e1728;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.60);
  }
}