/*
 * base.css — shriftlar, reset va hujjat darajasidagi uslublar.
 *
 * tokens.css dan KEYIN yuklanadi.
 */

/* ==========================================================================
   Shriftlar — lokal .woff2, CDN yo'q (docs/03 §7.2)
   ==========================================================================

   Ikkalasi ham o'zgaruvchan (variable) shrift: bitta fayl 100–900 oralig'ini
   qoplaydi, shuning uchun 400/500/600/700 uchun alohida fayl kerak emas.

   unicode-range MUHIM: brauzer sahifada shu oraliqdagi belgi UCHRAGANDAGINA
   faylni yuklaydi. O'zbek matni uchun `latin` yetarli (uning ichida
   U+02BB–02BC — `oʻ`, `gʻ`, `ʼ` belgilari), `latin-ext` esa faqat kerak
   bo'lganda tortiladi. */

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bricolage Grotesque Variable';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque Variable';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Reset (zamonaviy, minimal)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Mini App'da sahifani pastga tortib "yangilash" va rezina effekt kerak emas */
    overscroll-behavior-y: none;

    /* Telefon "iyagi" (safe area) */
    padding-bottom: env(safe-area-inset-bottom);
}

/*
 * `hidden` atributi HAR DOIM yashiradi (docs/05 Task 18).
 *
 * Brauzerning standart qoidasi (`[hidden] { display: none }`) eng past
 * darajada turadi: elementga `display` beradigan HAR QANDAY sinf undan
 * kuchliroq va `hidden` shunchaki ishlamay qoladi. Aynan quyidagi
 * `img { display: block }` shu tarzda rasm `onerror` yo'lini sindirgan edi —
 * `<img hidden>` baribir ko'rinib turardi va buzilgan rasm belgisi
 * o'rinbosar harfning yoniga chiqib qolardi (jonli sinovda topildi).
 *
 * Admin panelda bu qoida Task 14 dan beri bor; Mini App'da esa `.sheet[hidden]`
 * va `.ticket__meta[hidden]` kabi nuqtaviy yamoqlar bilan yuritilardi.
 */
[hidden] {
    display: none !important;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--cobalt);
    -webkit-tap-highlight-color: transparent;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

h1, h2, h3, h4 {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

/* ==========================================================================
   Tipografiya yordamchilari (docs/03 §7.2)
   ========================================================================== */

/* Sarlavha, taom nomi, narx, jami — Bricolage Grotesque */
.display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* Raqamlar bir xil kenglikda — ro'yxatdagi narxlar tik ustunda turadi */
.num {
    font-variant-numeric: tabular-nums;
}

.ink-soft {
    color: var(--ink-soft);
}

/*
 * Alpine.js hali ishga tushmagan paytda ko'rinmasligi kerak bo'lgan elementlar.
 * Alpine element'ni init qilgach x-cloak atributini o'zi olib tashlaydi.
 * `!important` kerak: shu elementlarning ko'pchiligida `display: flex` turadi.
 */
[x-cloak] {
    display: none !important;
}

/* Ekranda ko'rinmaydi, skrin-riderga o'qiladi */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Fokus va tanlash
   ========================================================================== */

/* Sichqoncha bilan bosilganda halqa chiqmaydi, klaviatura bilan — chiqadi */
:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection {
    background: var(--cobalt-wash);
    color: var(--ink);
}

/* ==========================================================================
   Harakatni kamaytirish (docs/03 §7.5.5)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}