/* Design system — dizayn tokenlari */
:root{
  /* ── Fon — chuqur, biroz ko'k tusli ── */
  --bg:#080d14;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, #11304a33, transparent),
            radial-gradient(900px 500px at -10% 110%, #0e3b2e33, transparent), #080d14;
  --bg-2:#0c131c;
  --surface:#101a26;
  --surface-2:#16222f;
  --glass:rgba(20,32,46,.65);
  --border:#1d2b3a;
  --border-2:#2a3e52;

  /* ── Matn ── */
  --text:#eef3f8;
  --text-dim:#9fb2c3;
  --text-mut:#5f7488;

  /* ── Brand ranglar ── */
  --primary:#36e0a0;       /* yashil-mint */
  --primary-d:#21b97f;
  --primary-soft:rgba(54,224,160,.13);
  --primary-glow:rgba(54,224,160,.35);
  --accent:#ff9d54;        /* to'q sariq */
  --accent-soft:rgba(255,157,84,.13);
  --violet:#a98bff;
  --violet-soft:rgba(169,139,255,.14);
  --info:#5db4ee;
  --info-soft:rgba(93,180,238,.13);
  --danger:#f0655b;
  --danger-soft:rgba(240,101,91,.13);
  --warn:#f2c14e;
  --gold:#f1ce5e;

  /* ── Skeleton ── */
  --skeleton-base:#1a2535;
  --skeleton-shine:#243040;

  /* ── Masofa ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px;

  /* ── Radius ── */
  --r1:10px; --r2:14px; --r3:20px; --r-full:999px;

  /* ── Soya + glow ── */
  --sh1:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 10px 30px -8px rgba(0,0,0,.55);
  --sh-glow:0 0 0 1px var(--primary-soft), 0 8px 28px -10px var(--primary-glow);
  --card-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px -6px rgba(0,0,0,.4);

  /* ── Tipografiya ── */
  --ff:'Inter',system-ui,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'JetBrains Mono','Fira Code','Consolas',monospace;
  --fs-xs:11.5px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:21px; --fs-2xl:30px;
  --lh:1.55;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* ── Layout ── */
  --sidebar:248px; --topbar:64px;

  /* ── Animatsiya ── */
  --ease:.22s cubic-bezier(.4,0,.2,1);
  --anim-fast:0.15s ease-out;
  --anim-med:0.25s cubic-bezier(.4,0,.2,1);
  --anim-slow:0.4s cubic-bezier(.4,0,.2,1);

  --side-grad:linear-gradient(180deg,var(--bg-2),#0a1019);
}

/* ── LIGHT TEMA ── */
:root[data-theme="light"]{
  --bg:#f0f4f9;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, #17b87818, transparent),
            radial-gradient(900px 500px at -10% 110%, #2f8fd118, transparent), #f0f4f9;
  --bg-2:#e8ecf2;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --glass:rgba(255,255,255,.80);
  --border:#dce3ec;
  --border-2:#c8d3de;

  --text:#0f1a24;
  --text-dim:#3d5166;
  --text-mut:#7a8fa3;

  --primary:#128c62;
  --primary-d:#0b6b4b;
  --primary-soft:rgba(18,140,98,.10);
  --primary-glow:rgba(18,140,98,.22);
  --accent:#c96d1c;
  --accent-soft:rgba(201,109,28,.10);
  --violet:#6b47c6;
  --violet-soft:rgba(107,71,198,.10);
  --info:#1e6fa8;
  --info-soft:rgba(30,111,168,.10);
  --danger:#c63328;
  --danger-soft:rgba(198,51,40,.10);
  --warn:#a87415;
  --gold:#a87415;

  --skeleton-base:#e2e8f0;
  --skeleton-shine:#eef2f7;

  --sh1:0 1px 2px rgba(15,26,36,.06);
  --sh2:0 10px 30px -10px rgba(15,26,36,.12);
  --sh-glow:0 0 0 1px var(--primary-soft), 0 8px 24px -12px var(--primary-glow);
  --card-shadow: 0 1px 3px rgba(15,26,36,.07), 0 4px 16px -6px rgba(15,26,36,.09);
  --side-grad:linear-gradient(180deg,#ffffff,var(--bg-2));
}