/* ═══════════════════════════════════════════════════════════
   TIBEX — Design Tokens (Futuristik sistema)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Neon palitra ────────────────────────────────────── */
  --neon-cyan:    #00E5FF;
  --neon-cyan-2:  #22D3EE;
  --neon-violet:  #8B5CF6;
  --neon-violet-2:#A78BFA;
  --neon-pink:    #F472B6;
  --neon-emerald: #10B981;
  --neon-amber:   #F59E0B;
  --neon-rose:    #F43F5E;

  /* ─── Sirt ranglari (dark asosiy) ─────────────────────── */
  --bg-deep:      #05070F;
  --bg-base:      #0A0E1A;
  --bg-raise:     #0F1524;
  --bg-card:      rgba(15, 21, 36, 0.72);
  --bg-elev:      rgba(22, 30, 51, 0.85);
  --bg-hover:     rgba(30, 41, 66, 0.9);
  --bg-input:     rgba(10, 14, 26, 0.7);

  /* ─── Chegaralar (glow-friendly) ──────────────────────── */
  --border-soft:  rgba(148, 163, 184, 0.10);
  --border-mid:   rgba(148, 163, 184, 0.18);
  --border-cyan:  rgba(0, 229, 255, 0.35);
  --border-violet:rgba(139, 92, 246, 0.35);

  /* ─── Matn ────────────────────────────────────────────── */
  --text-primary:   #E6EDF7;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-dim:       #475569;
  --text-accent:    var(--neon-cyan);

  /* ─── Gradientlar ─────────────────────────────────────── */
  --grad-cyber:    linear-gradient(135deg, #00E5FF 0%, #8B5CF6 100%);
  --grad-cyber-r:  linear-gradient(135deg, #8B5CF6 0%, #00E5FF 100%);
  --grad-teal:     linear-gradient(135deg, #10B981 0%, #00E5FF 100%);
  --grad-danger:   linear-gradient(135deg, #F43F5E 0%, #F59E0B 100%);
  --grad-surface:  linear-gradient(160deg, rgba(15,21,36,0.9) 0%, rgba(10,14,26,0.9) 100%);
  --grad-glow:     radial-gradient(circle at 30% 20%, rgba(0,229,255,0.16), transparent 50%),
                   radial-gradient(circle at 75% 80%, rgba(139,92,246,0.14), transparent 55%);

  /* ─── Soyalar (neon glow) ─────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.55);
  --shadow-cyan:   0 0 24px rgba(0,229,255,0.35), 0 0 60px rgba(0,229,255,0.12);
  --shadow-violet: 0 0 24px rgba(139,92,246,0.35), 0 0 60px rgba(139,92,246,0.12);
  --shadow-inner:  inset 0 1px 0 rgba(255,255,255,0.06);

  /* ─── Radius ──────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ─── Shrift ──────────────────────────────────────────── */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ─── O'lcham ─────────────────────────────────────────── */
  --sidebar-w: 248px;
  --topbar-h:  64px;

  /* ─── Animatsiya ──────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid:  280ms;
  --dur-slow: 480ms;
}

/* ─── Light rejim ────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg-deep:   #F4F7FB;
  --bg-base:   #FFFFFF;
  --bg-raise:  #F8FAFC;
  --bg-card:   rgba(255,255,255,0.85);
  --bg-elev:   rgba(255,255,255,0.95);
  --bg-hover:  rgba(241,245,249,0.95);
  --bg-input:  #FFFFFF;

  --border-soft:  rgba(15,23,42,0.08);
  --border-mid:   rgba(15,23,42,0.14);

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --text-dim:       #94A3B8;

  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 60px rgba(15,23,42,0.12);
}

/* ─── Global reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--neon-cyan-2); }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

::selection { background: rgba(0,229,255,0.28); color: var(--text-primary); }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.2);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.4); background-clip: padding-box; }