/* ============================================================
   Tiba Agent — Dizayn tokenlari
   Yagona manba: ranglar, tipografika, masofa, radius, soya.
   ============================================================ */

:root {
    /* ── Tipografika ─────────────────────────────────────── */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-2xs:  0.6875rem;  /* 11 */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.8125rem;  /* 13 */
    --text-base: 0.9375rem;  /* 15 */
    --text-md:   1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.375rem;   /* 22 */
    --text-2xl:  1.75rem;    /* 28 */
    --text-3xl:  2.25rem;    /* 36 */
    --text-4xl:  3rem;       /* 48 */
    --text-5xl:  3.75rem;    /* 60 */

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    --tracking-tighter: -0.028em;
    --tracking-tight:   -0.018em;
    --tracking-normal:  -0.008em;
    --tracking-wide:     0.02em;
    --tracking-widest:   0.09em;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;

    /* ── Masofa (4px shkala) ─────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

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

    /* ── Brend ranglari (rejimdan qat'i nazar) ───────────── */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #5145e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;

    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;

    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(99,102,241,.14) 0%, rgba(168,85,247,.14) 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f97316 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-mesh:
        radial-gradient(1200px 600px at 12% -10%, rgba(99,102,241,.18), transparent 60%),
        radial-gradient(900px 500px at 92% 8%, rgba(168,85,247,.16), transparent 62%),
        radial-gradient(700px 500px at 50% 110%, rgba(56,189,248,.12), transparent 60%);

    /* ── Harakat ─────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --dur-fast:  0.16s;
    --dur-base:  0.24s;
    --dur-slow:  0.4s;
    --dur-slower: 0.7s;

    /* ── Qatlamlar ───────────────────────────────────────── */
    --z-base:     1;
    --z-sticky:   40;
    --z-header:   50;
    --z-drawer:   80;
    --z-backdrop: 90;
    --z-modal:    100;
    --z-toast:    120;

    /* ── O'lchamlar ──────────────────────────────────────── */
    --sidebar-w: 264px;
    --header-h:  64px;
    --container: 1200px;
    --container-wide: 1400px;
}

/* ════════════════════════════════════════════════════════════
   Kunduzgi rejim (asosiy)
   ════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #f2f2f6;
    --bg-subtle:     #e9e9ef;
    --surface:       #ffffff;
    --surface-2:     #fafafc;
    --surface-3:     #f4f4f7;
    --surface-hover: #f0f0f4;
    --surface-glass: rgba(255, 255, 255, 0.72);

    --text:          #12121a;
    --text-secondary: #55555f;
    --text-tertiary: #8a8a94;
    --text-inverse:  #ffffff;

    --border:        rgba(0, 0, 0, 0.07);
    --border-strong: rgba(0, 0, 0, 0.13);
    --border-focus:  var(--brand-500);

    --brand:         #5145e5;
    --brand-hover:   #4338ca;
    --brand-soft:    rgba(99, 102, 241, 0.10);
    --brand-text:    #4338ca;

    --success:       #0f9d58;
    --success-soft:  rgba(16, 185, 129, 0.12);
    --success-text:  #067a4a;

    --warning:       #c2740a;
    --warning-soft:  rgba(245, 158, 11, 0.14);
    --warning-text:  #a35b06;

    --danger:        #dc2f2f;
    --danger-soft:   rgba(239, 68, 68, 0.11);
    --danger-text:   #b91c1c;

    --info:          #0071e3;
    --info-soft:     rgba(0, 113, 227, 0.11);
    --info-text:     #0057b8;

    --shadow-xs: 0 1px 2px rgba(16, 18, 32, 0.05);
    --shadow-sm: 0 1px 2px rgba(16, 18, 32, 0.05), 0 2px 6px rgba(16, 18, 32, 0.04);
    --shadow-md: 0 2px 4px rgba(16, 18, 32, 0.04), 0 8px 20px rgba(16, 18, 32, 0.07);
    --shadow-lg: 0 4px 8px rgba(16, 18, 32, 0.05), 0 18px 40px rgba(16, 18, 32, 0.10);
    --shadow-xl: 0 8px 16px rgba(16, 18, 32, 0.06), 0 32px 64px rgba(16, 18, 32, 0.14);
    --shadow-brand: 0 6px 20px rgba(81, 69, 229, 0.28);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    --ring: 0 0 0 3.5px rgba(99, 102, 241, 0.22);
}

/* ════════════════════════════════════════════════════════════
   Tungi rejim
   ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:            #08080c;
    --bg-subtle:     #0d0d13;
    --surface:       #131319;
    --surface-2:     #17171f;
    --surface-3:     #1d1d26;
    --surface-hover: #202029;
    --surface-glass: rgba(19, 19, 25, 0.72);

    --text:          #f2f2f7;
    --text-secondary: #a0a0ad;
    --text-tertiary: #6c6c7a;
    --text-inverse:  #0b0b10;

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-focus:  var(--brand-400);

    --brand:         #6f6bf5;
    --brand-hover:   #837fff;
    --brand-soft:    rgba(129, 140, 248, 0.16);
    --brand-text:    #a5b4fc;

    --success:       #2fce7f;
    --success-soft:  rgba(52, 211, 153, 0.16);
    --success-text:  #6ee7b7;

    --warning:       #f5b13d;
    --warning-soft:  rgba(251, 191, 36, 0.16);
    --warning-text:  #fcd34d;

    --danger:        #ff5f57;
    --danger-soft:   rgba(248, 113, 113, 0.16);
    --danger-text:   #fca5a5;

    --info:          #3d9bff;
    --info-soft:     rgba(96, 165, 250, 0.16);
    --info-text:     #93c5fd;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.42), 0 10px 26px rgba(0, 0, 0, 0.46);
    --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.48), 0 22px 48px rgba(0, 0, 0, 0.56);
    --shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.5), 0 40px 80px rgba(0, 0, 0, 0.62);
    --shadow-brand: 0 6px 24px rgba(111, 107, 245, 0.4);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --ring: 0 0 0 3.5px rgba(129, 140, 248, 0.3);

    --gradient-mesh:
        radial-gradient(1200px 600px at 12% -10%, rgba(99,102,241,.22), transparent 60%),
        radial-gradient(900px 500px at 92% 8%, rgba(168,85,247,.18), transparent 62%),
        radial-gradient(700px 500px at 50% 110%, rgba(56,189,248,.12), transparent 60%);
}

/* Tizim rejimi — foydalanuvchi tanlamagan bo'lsa */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;

        --bg:            #08080c;
        --bg-subtle:     #0d0d13;
        --surface:       #131319;
        --surface-2:     #17171f;
        --surface-3:     #1d1d26;
        --surface-hover: #202029;
        --surface-glass: rgba(19, 19, 25, 0.72);

        --text:          #f2f2f7;
        --text-secondary: #a0a0ad;
        --text-tertiary: #6c6c7a;
        --text-inverse:  #0b0b10;

        --border:        rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.16);
        --border-focus:  var(--brand-400);

        --brand:         #6f6bf5;
        --brand-hover:   #837fff;
        --brand-soft:    rgba(129, 140, 248, 0.16);
        --brand-text:    #a5b4fc;

        --success:       #2fce7f;
        --success-soft:  rgba(52, 211, 153, 0.16);
        --success-text:  #6ee7b7;

        --warning:       #f5b13d;
        --warning-soft:  rgba(251, 191, 36, 0.16);
        --warning-text:  #fcd34d;

        --danger:        #ff5f57;
        --danger-soft:   rgba(248, 113, 113, 0.16);
        --danger-text:   #fca5a5;

        --info:          #3d9bff;
        --info-soft:     rgba(96, 165, 250, 0.16);
        --info-text:     #93c5fd;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.34);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.42), 0 10px 26px rgba(0, 0, 0, 0.46);
        --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.48), 0 22px 48px rgba(0, 0, 0, 0.56);
        --shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.5), 0 40px 80px rgba(0, 0, 0, 0.62);
        --shadow-brand: 0 6px 24px rgba(111, 107, 245, 0.4);
        --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

        --ring: 0 0 0 3.5px rgba(129, 140, 248, 0.3);
    }
}