/* ============================================================
   DIZAYN TIZIMI
   Ikki qatlam:
   1) Hero va header — eski tokenlar (--color-*, --font-main, --font-heading).
      Ularga tegilmagan, hero avvalgidek ko'rinadi.
   2) «Yumshoq oq» kit (DESIGN_sections.md) — hero'dan keyingi barcha
      bo'limlar, ichki sahifalar va footer shu tokenlardan foydalanadi.
   ============================================================ */
:root {
    /* ==================== 1. HERO / HEADER TOKENLARI ==================== */

    /* Asosiy harakat rangi: hero tugmalari va header belgisi */
    --color-primary: #ff385c;
    --color-primary-active: #e00b41;
    --color-primary-disabled: #ffc4cf;

    --color-accent: var(--color-primary);
    --color-accent-strong: var(--color-primary-active);
    --color-accent-soft: #ffe8ec;

    /* Quyuq dunyo: hero'dan olingan */
    --color-navy: #0b1533;
    --color-navy-deep: #070e24;
    --color-sky: #8fb3ff;
    --color-dark: #17171c;

    /* Matn (hero/header/admin) */
    --color-ink: #212121;
    --color-body: #3f3f3f;
    --color-muted: #616161;
    --color-muted-soft: #93939f;
    --color-slate: #75758a;
    --color-on-primary: #ffffff;

    /* Yuzalar (admin) */
    --color-canvas: #ffffff;
    --color-stone: #eeece7;
    --color-pale-blue: #f1f5ff;
    --color-surface-soft: #f7f7f6;
    --color-surface-strong: #eeece7;

    --color-shell: #ffffff;
    --color-shell-dark: var(--color-navy);
    --color-on-shell-dark: #ffffff;
    --color-on-shell-dark-muted: #93a0c2;

    --color-hairline: #d9d9dd;
    --color-hairline-soft: #e5e7eb;
    --color-card-border: #f2f2f2;
    --color-border-strong: #93939f;

    --color-link: #1863dc;
    --color-coral: #ff7759;
    --color-error: #b30000;
    --color-error-hover: #8f0000;
    --color-success: #0f8a4b;
    --color-focus: #4c6ee6;

    --color-text: var(--color-ink);
    --color-bg: var(--color-canvas);
    --color-bg-alt: var(--color-surface-soft);
    --color-border: var(--color-hairline);
    --color-legal-link: var(--color-link);
    --color-primary-soft: var(--color-accent-soft);
    --color-deep-green: var(--color-navy);
    --color-pale-green: var(--color-sky);

    /* Hero va header shriftlari */
    --font-main: 'Figtree', 'Inter', Arial, ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Space Grotesk', 'Figtree', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

    --text-display-xl: 60px;
    --text-display-lg: 48px;
    --text-display-md: 32px;
    --text-display-sm: 24px;
    --text-title: 18px;
    --text-body: 16px;
    --text-body-lg: 18px;
    --text-body-sm: 14px;
    --text-caption: 14px;
    --text-caption-sm: 13px;
    --text-badge: 12px;

    /* Hero/header burchaklari */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-pill: 32px;
    --radius-full: 9999px;
    --radius: var(--radius-sm);

    /* Oraliqlar */
    --space-xs: 6px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --section-padding: 80px;

    /* O'lchamlar */
    --container-width: 1280px;
    --container-pad: 40px;
    --float-inset: 24px;
    --float-top: 20px;
    --header-height: 72px;

    /* Animatsiya */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 0.2s var(--ease-out);
    --transition-base: 0.3s var(--ease-out);


    /* ==================== 2. «YUMSHOQ OQ» KIT ==================== */

    /* Shrift: Manrope 400 / 500 / 600 / 700 / 800 */
    --font-kit: 'Manrope', 'Figtree', ui-sans-serif, system-ui, sans-serif;

    /* Fon va sirt */
    --bg: #FBFCFE;            /* section fon (deyarli oq, sovuqroq) */
    --surface: #FFFFFF;       /* karta, form, accordion, button */
    --surface-2: #F4F7FC;     /* chip, step ikonka foni */
    --divider: #EEF2F9;       /* ajratuvchi chiziqlar */
    --border: #E9EEF6;        /* section va input chegarasi */
    --border-strong: #DCE3EF; /* ghost button chegarasi */
    --track: #F1F4FA;         /* progress bar bo'sh yo'li */

    /* Matn (hammasi 4.5:1 dan yuqori) */
    --ink: #0B1A38;           /* sarlavhalar (hero'dagi navy) */
    --ink-2: #33456B;         /* label, ghost button matni */
    --body: #4A5B78;          /* asosiy matn */
    --muted: #5F6E88;         /* mayda uppercase labellar, meta */
    --placeholder: #9AA8BF;
    --disabled-text: #A8B4C8;

    /* Aksent */
    --red: #F42B4C;           /* asosiy button, progress, faol step */
    --red-hover: #D81A3C;
    --red-ink: #D31036;       /* oq fondagi mayda qizil matn */
    --red-tint: #FFECF0;      /* badge / yumshoq button foni */
    --red-tint-2: #FFD8E0;
    --red-card: #FFF3F5;      /* urg'uli karta va faol step foni */
    --blue: #2E6BFF;          /* ikkinchi darajali progress, input focus */
    --blue-ink: #1F49B8;      /* ikonka rangi */
    --blue-tint: #EEF3FF;     /* ikonka foni */
    --blue-light: #4FB3FF;    /* gradient uchi */
    --green: #0F8A4B;         /* muvaffaqiyat (kitda yo'q, eski rangdan) */
    --green-tint: #E8F6EE;

    /* Soyalar */
    --sh-card: 0 14px 34px rgba(11, 26, 56, .08);
    --sh-card-hover: 0 22px 46px rgba(11, 26, 56, .14);
    --sh-soft: 0 10px 24px rgba(11, 26, 56, .07);
    --sh-btn: 0 8px 20px rgba(11, 26, 56, .09);
    --sh-btn-hover: 0 12px 26px rgba(11, 26, 56, .16);
    --sh-red: 0 12px 26px rgba(244, 43, 76, .30);
    --sh-form: 0 18px 44px rgba(11, 26, 56, .10);

    /* Radiuslar: barcha kartalar 10px, ichki elementlar undan kichik */
    --r-pill: 999px;   /* button, chip, badge */
    --r-card: 10px;    /* karta */
    --r-form: 10px;    /* forma */
    --r-acc: 10px;     /* accordion, statistika kartasi */
    --r-icon: 10px;    /* ikonka kvadrati */
    --r-input: 8px;    /* input */
    --r-step: 8px;     /* step raqami */

    /* Eski soya nomlari kitga yo'naltiriladi */
    --shadow-card: var(--sh-card);
    --shadow-sm: none;
    --shadow: var(--sh-card);
    --shadow-md: var(--sh-card);
    --shadow-lg: var(--sh-card-hover);
}