/*
 * Dizayn tokenlari — iOS (Apple HIG) semantikasi asosida.
 *
 * Qoida: shablonlarda hech qachon aniq rang yozilmaydi, faqat shu yerdagi
 * o'zgaruvchilar. Shuning uchun yorug'/qorong'i rejim va keyinchalik brend
 * rangini almashtirish bitta joydan boshqariladi.
 *
 * Rang nomlari Apple'ning semantik qatlamlarini takrorlaydi:
 *   surface  — fon qatlamlari (grouped background → raised → bar material)
 *   label    — matn ierarxiyasi (1 → 4, kontrast kamayib boradi)
 *   fill     — interaktiv elementning yarim shaffof to'ldiruvchisi
 *   separator— soch tolasi chiziq
 */

:root {
    /* ── Tizim ranglari (yorug' rejim) ───────────────────────────────────── */
    --blue: #007aff;
    --green: #34c759;
    --red: #ff3b30;
    --orange: #ff9500;
    --yellow: #ffcc00;
    --teal: #30b0c7;
    --indigo: #5856d6;
    --purple: #af52de;
    --pink: #ff2d55;
    --gray: #8e8e93;

    --blue-soft: rgba(0, 122, 255, .12);
    --green-soft: rgba(52, 199, 89, .14);
    --red-soft: rgba(255, 59, 48, .12);
    --orange-soft: rgba(255, 149, 0, .14);
    --purple-soft: rgba(175, 82, 222, .12);
    --gray-soft: rgba(142, 142, 147, .14);

    /* ── Fon qatlamlari ──────────────────────────────────────────────────── */
    --surface: #f2f2f7;          /* systemGroupedBackground */
    --surface-raised: #ffffff;   /* secondarySystemGroupedBackground — kartalar */
    --surface-sunken: #e8e8ed;   /* o'yilgan joylar: segmented track, progress */
    --surface-bar: rgba(249, 249, 251, .72);   /* navbar/tabbar materiali */
    --surface-sidebar: rgba(240, 240, 245, .8);
    --surface-overlay: rgba(255, 255, 255, .96); /* sheet, popover */
    --scrim: rgba(0, 0, 0, .28);

    /* ── Matn ierarxiyasi ────────────────────────────────────────────────── */
    --label: #1c1c1e;
    --label-2: rgba(60, 60, 67, .6);
    --label-3: rgba(60, 60, 67, .34);
    --label-4: rgba(60, 60, 67, .18);
    --label-inverse: #ffffff;

    /* ── To'ldiruvchilar va chiziqlar ────────────────────────────────────── */
    --fill-1: rgba(120, 120, 128, .2);
    --fill-2: rgba(120, 120, 128, .16);
    --fill-3: rgba(118, 118, 128, .12);
    --fill-4: rgba(116, 116, 128, .06);
    --separator: rgba(60, 60, 67, .22);
    --separator-opaque: #d8d8dc;

    --accent: var(--blue);
    --accent-contrast: #ffffff;
    --accent-soft: var(--blue-soft);

    /* ── Tipografiya (iOS matn uslublari) ────────────────────────────────── */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
            "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

    --text-large-title: 700 2.125rem/1.18 var(--font);  /* 34 */
    --text-title-1: 700 1.75rem/1.2 var(--font);        /* 28 */
    --text-title-2: 700 1.375rem/1.25 var(--font);      /* 22 */
    --text-title-3: 600 1.25rem/1.3 var(--font);        /* 20 */
    --text-headline: 600 1.0625rem/1.35 var(--font);    /* 17 */
    --text-body: 400 1.0625rem/1.45 var(--font);        /* 17 */
    --text-callout: 400 1rem/1.4 var(--font);           /* 16 */
    --text-subhead: 500 .9375rem/1.35 var(--font);      /* 15 */
    --text-footnote: 400 .8125rem/1.35 var(--font);     /* 13 */
    --text-caption: 500 .75rem/1.3 var(--font);         /* 12 */
    --text-caption-2: 500 .6875rem/1.25 var(--font);    /* 11 */

    /* ── Masofa: 4pt shkala ──────────────────────────────────────────────── */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* ── Burchaklar (iOS "continuous corner" ga yaqin) ───────────────────── */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-2xl: 24px;
    --r-pill: 999px;

    /* ── Soyalar ─────────────────────────────────────────────────────────── */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .04);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-switch: 0 2px 6px rgba(0, 0, 0, .18), 0 0 1px rgba(0, 0, 0, .12);

    /* ── Harakat: iOS prujinasiga yaqin egri chiziqlar ───────────────────── */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .16s;
    --dur: .26s;
    --dur-slow: .42s;

    /* ── O'lchamlar ──────────────────────────────────────────────────────── */
    --tap: 44px;              /* HIG: minimal bosish maydoni */
    --bar-h: 52px;
    --tabbar-h: 56px;
    --sidebar-w: 260px;
    --content-max: 1180px;
    --blur: saturate(180%) blur(20px);
}

/* ── Qorong'i rejim ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --blue: #0a84ff;
        --green: #30d158;
        --red: #ff453a;
        --orange: #ff9f0a;
        --yellow: #ffd60a;
        --teal: #40c8e0;
        --indigo: #5e5ce6;
        --purple: #bf5af2;
        --pink: #ff375f;
        --gray: #98989d;

        --blue-soft: rgba(10, 132, 255, .22);
        --green-soft: rgba(48, 209, 88, .2);
        --red-soft: rgba(255, 69, 58, .2);
        --orange-soft: rgba(255, 159, 10, .2);
        --purple-soft: rgba(191, 90, 242, .2);
        --gray-soft: rgba(152, 152, 157, .2);

        --surface: #000000;
        --surface-raised: #1c1c1e;
        --surface-sunken: #2c2c2e;
        --surface-bar: rgba(22, 22, 24, .72);
        --surface-sidebar: rgba(18, 18, 20, .82);
        --surface-overlay: rgba(28, 28, 30, .96);
        --scrim: rgba(0, 0, 0, .5);

        --label: #ffffff;
        --label-2: rgba(235, 235, 245, .6);
        --label-3: rgba(235, 235, 245, .34);
        --label-4: rgba(235, 235, 245, .16);

        --fill-1: rgba(120, 120, 128, .36);
        --fill-2: rgba(120, 120, 128, .32);
        --fill-3: rgba(118, 118, 128, .24);
        --fill-4: rgba(116, 116, 128, .14);
        --separator: rgba(84, 84, 88, .6);
        --separator-opaque: #38383a;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
        --shadow-3: 0 18px 48px rgba(0, 0, 0, .64);
    }
}

/* Foydalanuvchi qo'lda qorong'i rejimni tanlasa (tizim yorug' bo'lsa ham). */
:root[data-theme="dark"] {
    --blue: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --yellow: #ffd60a;
    --teal: #40c8e0;
    --indigo: #5e5ce6;
    --purple: #bf5af2;
    --pink: #ff375f;
    --gray: #98989d;

    --blue-soft: rgba(10, 132, 255, .22);
    --green-soft: rgba(48, 209, 88, .2);
    --red-soft: rgba(255, 69, 58, .2);
    --orange-soft: rgba(255, 159, 10, .2);
    --purple-soft: rgba(191, 90, 242, .2);
    --gray-soft: rgba(152, 152, 157, .2);

    --surface: #000000;
    --surface-raised: #1c1c1e;
    --surface-sunken: #2c2c2e;
    --surface-bar: rgba(22, 22, 24, .72);
    --surface-sidebar: rgba(18, 18, 20, .82);
    --surface-overlay: rgba(28, 28, 30, .96);
    --scrim: rgba(0, 0, 0, .5);

    --label: #ffffff;
    --label-2: rgba(235, 235, 245, .6);
    --label-3: rgba(235, 235, 245, .34);
    --label-4: rgba(235, 235, 245, .16);

    --fill-1: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(118, 118, 128, .24);
    --fill-4: rgba(116, 116, 128, .14);
    --separator: rgba(84, 84, 88, .6);
    --separator-opaque: #38383a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, .64);
}