/* ══════════════════════════════════════════════════════════════════════ SERTIFIKAT QR — DESIGN TOKENS · Indigo dashboard tizimi ────────────────────────────────────────────────────────────────────── Yagona haqiqat manbai. Hech qaysi boshqa faylda qattiq rang bo'lmasin. Palitra reference "Project Dashboard" UI'dan olingan: · Asosiy — indigo #4F46E5 / #6366F1 · Aksentlar — cyan, binafsha, yashil, amber (KPI ikonkalari) · Yumshoq slate yuzalar, katta radius, indigo tusli soyalar Legacy alias: eski `--primary`, `--bg`, `--brass-*` nomlari saqlangan va yangi qiymatlarga bog'langan. Shu sababli mavjud barcha CSS fayl hech qanday tahrirsiz yangi ranglarga o'tadi (brass → indigo/accent). ══════════════════════════════════════════════════════════════════════ */ /* Core qatlam. tokens.css 42 sahifada ulangan yagona umumiy fayl, shuning uchun qolgan core fayllar shu yerdan import qilinadi — aks holda ularni har bir HTML ga qo'lda ulash kerak bo'lardi. Kaskad: bu importlar main.css dan OLDIN keladi, ya'ni sahifa uslublari ustunlik qiladi. responsive.css esa ataylab oxirida va o'zi kerakli joyda specificity/!important bilan himoyalanadi. */ @import url('typography.css'); @import url('signature.css'); @import url('responsive.css'); :root { color-scheme: light; /* ── INDIGO — asosiy interaktiv ── */ --indigo-900: #312E81; --indigo-800: #3730A3; --indigo-700: #4338CA; --indigo-600: #4F46E5; /* asosiy tugma */ --indigo-500: #6366F1; --indigo-400: #818CF8; --indigo-300: #A5B4FC; --indigo-100: #E0E7FF; --indigo-050: #EEF2FF; --indigo-a12: rgba(79, 70, 229, .12); --indigo-a24: rgba(79, 70, 229, .22); --indigo-glow: rgba(79, 70, 229, .28); /* ── AKSENTLAR (KPI ikonkalari) ── */ --sky: #3B82F6; --sky-bg: #E0EDFF; --cyan: #06B6D4; --cyan-bg: #CFFAFE; --violet: #8B5CF6; --violet-bg: #EDE9FE; --amber: #F59E0B; --amber-bg: #FEF3C7; --pink: #EC4899; --pink-bg: #FCE7F3; /* ── QIMMATBAHO aksent (legacy "brass" o'rni → indigo/violet) ── */ --brass-800: #3730A3; --brass-700: #4338CA; --brass-600: #4F46E5; --brass: #6366F1; --brass-400: #818CF8; --brass-300: #A5B4FC; --brass-100: #E0E7FF; --brass-050: #EEF2FF; --brass-a12: rgba(99, 102, 241, .12); --brass-a24: rgba(99, 102, 241, .22); /* ── MUHR qizili → endi ishlatilmaydi, indigo aksentga bog'langan ── */ --seal: #6366F1; --seal-lit: #818CF8; --seal-a12: rgba(99, 102, 241, .12); /* ── YUZALAR (slate) ── */ --paper: #F5F7FB; /* sahifa foni */ --paper-2: #EEF2F8; --paper-3: #E4EAF3; /* bosilgan holat / hover to'ldirish */ --paper-raised:#FFFFFF; /* karta */ --rule: #E8EDF5; /* hairline kontur */ --rule-strong: #C3CEDD; /* ── MATN ── */ --ink-text: #1E293B; --ink-text-2: #334155; /* Bu ikki daraja ilgari #64748B / #94A3B8 edi — sahifa fonida (#F5F7FB) 4.44:1 va 2.56:1 berardi, ya'ni AA talabidan (4.5) past. Ohang saqlanib, yorqinligi tushirildi: endi ikkalasi ham o'tadi va bir-biridan farq qiladi. */ --ink-muted: #55637A; --ink-soft: #627186; /* Eski ink-* nomlari (siyoh tugmalar uchun ishlatilgan) → indigo */ --ink-900: #312E81; --ink-800: #4338CA; --ink-700: #4F46E5; --ink-600: #6366F1; --ink-500: #818CF8; --ink-100: #E0E7FF; --ink-050: #EEF2FF; /* ── SEMANTIK ── */ /* Signal ranglari palitraning 700-pog‘onasida turadi. Sababi: CSS ularni nafaqat nuqta/ikonka, balki MATN rangi sifatida ham ishlatadi — ham oq yuzada, ham o‘z rangli tagida (.st-green, .expired, .toast-warning, doc-type nishonlari). Yorug‘roq pog‘ona (#10B981, #F59E0B, #EF4444) bu holatda 2.1–3.8:1 beradi, ya‘ni AA dan past. 700-pog‘ona ikkala fonda ham 4.5:1 dan o‘tadi. scripts/check-contrast.js buni qo‘riqlaydi. */ --verified: #047857; --verified-bg: #D1FAE5; --revoked: #B91C1C; --revoked-bg: #FEE2E2; --pending: #B45309; --pending-bg: #FEF3C7; --info: #4F46E5; --info-bg: #EEF2FF; /* ── SEMANTIK MATN va KONTUR ──────────────────────────────────────── Yuqoridagi `--verified`, `--revoked` … to'yingan ranglar: ular ikonka va to'ldirish uchun yaxshi, lekin yumshoq fon ustidagi MATN uchun kontrasti yetmaydi (#10B981 · #D1FAE5 = 2.0:1, AA talabi 4.5). Shuning uchun har bir holat uchun uchlik ajratildi: -bg yumshoq fon -fg shu fon ustidagi matn (AA dan o'tadi) -border kontur / konturli tugma chegarasi Dark rejimda -fg yorug'lashadi, -bg esa shaffof tusga aylanadi. */ --success-fg: #117C39; --success-border: #BBF7D0; --danger-fg: #B91C1C; --danger-border: #FECACA; --warning-fg: #92400E; --warning-bg: var(--pending-bg); --warning-border: #FDE68A; --info-fg: #4338CA; --info-border: #C7D2FE; /* Input / select / textarea konturi. WCAG 1.4.11 boshqaruv elementining chegarasidan 3:1 talab qiladi — oq karta ustidagi oq input uchun chegara yagona belgi. `--border` (1.2:1) bu vazifaga yaramaydi, u faqat bezak chiziqlari uchun. */ --field-border: #8C94A0; --field-border-focus: var(--primary); /* ── BREND TO'LDIRISHI ────────────────────────────────────────────── `--primary` MATN uchun: dark rejimda ataylab yorug'lashadi (#4F46E5 → #818CF8), aks holda qora fonda o'qib bo'lmaydi. Ammo aynan shu sabab u TO'LDIRISH uchun yaramaydi: dark rejimda oq matnli tugma #818CF8 fonida 2.6:1 ga tushadi. Shuning uchun to'ldirish uchun alohida token — u dark rejimda deyarli o'zgarmaydi va oq matn bilan har doim AA dan o'tadi. */ --brand-fill: #4F46E5; --brand-fill-hover: #4338CA; --danger-fill: #DC2626; --danger-fill-hover:#B91C1C; --warning-fill: #B45309; --warning-fill-hover:#92400E; --telegram-fill: #0077B5; --telegram-fill-hover:#00669C; /* Rangli to'ldirish ustidagi matn — har ikki rejimda ham oq. */ --on-brand: #FFFFFF; --text-inverse: #FFFFFF; --on-warning: #FFFFFF; /* Tooltip — sahifa foniga TESKARI bo'lishi kerak, aks holda u ajralib turmaydi. Shu sababli u dark rejimda yorug'lashadi. */ --tooltip-bg: #1E293B; --tooltip-fg: #FFFFFF; /* ── SIYOH (INK) YUZALAR USTIDAGI MATN ────────────────────────────── Landing hero, verify bo'limi va footer to'q indigo fonda turadi va temaga ergashmaydi — ular light rejimda ham to'q qoladi. Bu shkala ilgari landing.css ichida qo'lda yozilgan iliq kulrang ranglar edi (#A9A296, #8E887E, #6F6A61). Ular avvalgi "brass" dizaynda qora-jigarrang fon uchun tanlangan, keyin fon indigoga o'zgargan va ranglar shundayligicha qolgan. Natijada hero'dagi tavsif matni 2.25:1, footer havolalari 3.25:1 ga tushib ketgan edi — ya'ni AA talabidan ikki barobar past. Yangi qiymatlar gradientning eng YORUG' nuqtasiga (#7C3AED) qarab tanlangan, shuning uchun ular butun hero bo'ylab va undan to'qroq `--ink-900` yuzasida ham AA dan o'tadi. */ --on-ink-title: #FFFFFF; --on-ink-text: #F1EFFA; --on-ink-muted: #E7E3F6; /* Siyoh yuzadagi aksent matn (ajratilgan so'z, raqamlar, teglar). `--brass-300` (#A5B4FC) bu vazifada hero gradientida 2.86:1 berardi. */ --on-ink-accent: #E0E7FF; --on-ink-success: #A7F3D0; --on-ink-danger: #FECACA; --on-ink-surface: rgba(255, 255, 255, .06); --on-ink-surface-2: rgba(255, 255, 255, .10); --on-ink-border: rgba(255, 255, 255, .16); /* Siyoh yuzadagi CHAQIRUV (CTA) tugmasi. To'q fon ustida to'q tugma ko'rinmaydi. Tugma gradientlari oq matn AA dan o'tishi uchun to'qlashtirilgach, ular hero fonidan atigi 1.26:1 farq qilib qoldi — WCAG 1.4.11 esa boshqaruv elementi uchun 3:1 talab qiladi. Yorug' tugma ikkala shartni ham bajaradi: fondan 6.29:1 ajraladi va matni 7.90:1 da o'qiladi. */ --on-ink-btn-bg: #FFFFFF; --on-ink-btn-bg-h: #EEF2FF; --on-ink-btn-fg: #4338CA; --on-ink-btn-border: rgba(255, 255, 255, .72); --on-ink-border-2: rgba(255, 255, 255, .24); /* Konsol / log bloklari har ikki rejimda ham qorong'i qoladi — bu terminal matni uchun odatiy va o'qishni osonlashtiradi. */ --code-bg: #0F172A; --code-fg: #E2E8F0; /* ── RADIUS — reference'dagi yumshoq kartalar ── */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ── GLASSMORPHISM & GLOW ── */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.4); --glass-blur: blur(16px) saturate(180%); --shadow-glow-primary: 0 0 25px rgba(99, 102, 241, 0.3); --shadow-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.3); --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.3); /* ── SOYA — yumshoq, indigo tusli ── */ --shadow-hairline: 0 0 0 1px var(--rule); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03); --shadow: 0 4px 14px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --shadow-md: 0 10px 28px rgba(15, 23, 42, .09), 0 3px 8px rgba(15, 23, 42, .04); --shadow-lg: 0 22px 48px rgba(15, 23, 42, .13), 0 8px 16px rgba(15, 23, 42, .06); --shadow-brass: 0 6px 20px var(--indigo-glow); --shadow-indigo: 0 6px 20px var(--indigo-glow); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .15); /* ── GRADIENT ── */ /* Tugma gradientlari — barcha to'xtashlar indigo-600 va undan to'q. Ilgari ular bir pog'ona och edi va oq matn AA dan o'tmasdi: .btn-primary 4.47:1, landing sahifasining CTA tugmasi esa 2.98:1. Bu gradientlar 16 joyda ishlatilgani uchun nuqson butun saytga tarqalgan edi. */ --grad-ink: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); --grad-ink-h: linear-gradient(135deg, #4338CA 0%, #3730A3 100%); /* Brass — premium/CTA. Hero foni (#4F46E5 -> #7C3AED) dan sezilarli TO'Q, shuning uchun uning ustida aniq ajralib turadi; binafsha uchi esa uni oddiy birlamchi tugmadan farqlaydi. */ --grad-brass: linear-gradient(135deg, #4338CA 0%, #5B21B6 100%); --grad-brass-h: linear-gradient(135deg, #3730A3 0%, #4C1D95 100%); --grad-primary: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); --grad-primary-h: linear-gradient(135deg, #4338CA 0%, #3730A3 100%); --grad-hero: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); /* Jarayon chizig'i (progress). Matn tashimaydi, shuning uchun to'yingan semantik yashil bemalol ishlatiladi. */ --grad-success: linear-gradient(90deg, var(--verified) 0%, #22C55E 100%); /* Tarif pog'onalarining ajratuvchi chizig'i. Bezak — ustida matn yo'q. Ilgari uchalasi ham qattiq kodlangan edi (emerald / indigo / amber) va palitradan tashqarida turardi. */ --grad-tier-free: linear-gradient(180deg, var(--verified) 0%, #059669 100%); --grad-tier-standard: linear-gradient(180deg, var(--indigo-500) 0%, var(--indigo-600) 100%); --grad-tier-pro: linear-gradient(180deg, var(--violet) 0%, #6D28D9 100%); /* Rasm yuklanmagan joydagi o'rin egallovchi (shablon/sertifikat eskizi). Ilgari bu iliq krem rang edi (#F5F5F0 -> #E8E4D9) — u eski "brass" dizaynidan qolgan va indigo yuzalar orasida begona ko'rinardi. */ --grad-thumb: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%); --grad-rule: linear-gradient(90deg, transparent, var(--indigo-400) 20%, var(--indigo-500) 50%, var(--indigo-400) 80%, transparent); --grad-paper: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%); /* ── HARAKAT ── */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-stamp: cubic-bezier(.2, 1.5, .35, 1); --dur-fast: .15s; --dur: .25s; --dur-slow: .4s; /* ── TIPOGRAFIKA — reference: qalin geometrik sans ── */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace; /* ── SUYUQ (FLUID) SHKALA ────────────────────────────────────────── Har bir o'lcham 360px va 1280px viewport oralig'ida uzluksiz o'sadi. Natijada sarlavhalarni har sahifada media query bilan qayta kichraytirish kerak emas — bitta e'lon barcha ekranga yetadi. clamp(MIN, rem + vw, MAX) — rem qismi foydalanuvchining brauzer shrift o'lchami sozlamasini hurmat qiladi (faqat vw ishlatilsa, zoom/kattalashtirish buziladi — a11y talabi). Eski qiymatlar MAX sifatida saqlangan: desktopda ko'rinish o'zgarmaydi, faqat kichik ekranlarda muvozanatlashadi. */ --text-xs: clamp(11px, 0.663rem + 0.11vw, 12px); --text-sm: clamp(12px, 0.738rem + 0.05vw, 13px); --text-base:clamp(14px, 0.851rem + 0.11vw, 15px); --text-md: clamp(15px, 0.913rem + 0.11vw, 16px); --text-lg: clamp(17px, 1.038rem + 0.11vw, 18px); --text-xl: clamp(20px, 1.201rem + 0.22vw, 22px); --text-2xl: clamp(24px, 1.402rem + 0.43vw, 28px); --text-3xl: clamp(28px, 1.554rem + 0.87vw, 36px); --text-4xl: clamp(34px, 1.783rem + 1.52vw, 48px); /* Asosiy matn — 16px ni kichik ekranda 15px gacha yumshoq tushiradi. iOS input zoom'ini oldini olish uchun formalarda 16px shart (responsive.css da ta'minlangan). */ --text-body: clamp(15px, 0.913rem + 0.11vw, 16px); /* ── SPACING SHKALASI ────────────────────────────────────────────── 4px bazasida. Ilgari har fayl o'z padding qiymatini o'ylab topardi (12/14/16/18/20/24 aralash) — bu ritmni buzardi. */ /* ── SUYUQ BO'SHLIQLAR ────────────────────────────────────────────── Quyidagi `--space-*` shkalasi qat'iy piksellardan iborat va u joylashuv uchun mo'ljallangan. Ammo YUZALARNING ichki bo'shlig'i ekran kengligiga qarab o'zgarishi kerak: 32px to'ldirish 1920px monitorda o'rinli, 1366px noutbukda esa kontentni siqib qo'yadi. Tipografiya allaqachon `clamp()` bilan suyuq edi — bo'shliqlar esa ortda qolgan. Bu tokenlar shu bo'shliqni yopadi va bitta joydan 63 ta sahifaga yetib boradi. Yuqori chegaralar ataylab avvalgi qiymatlardan past: interfeys bir pog'ona ixchamlashadi va ekranga ko'proq ma'lumot sig'adi. */ --pad-page: clamp(14px, 1.2vw + 8px, 28px); /* sahifa chekkasi */ --pad-card: clamp(14px, 0.9vw + 8px, 22px); /* karta ichi */ --pad-cell-y: clamp(9px, 0.4vw + 6px, 13px); /* jadval katagi */ --pad-cell-x: clamp(10px, 0.6vw + 6px, 16px); --gap-tight: clamp(6px, 0.4vw + 4px, 10px); --gap: clamp(10px, 0.7vw + 6px, 16px); --gap-loose: clamp(14px, 1.0vw + 8px, 24px); /* Navbar balandligi bir necha joyda ishlatiladi (`calc(100dvh - …)`), shuning uchun u token bo'lishi shart — aks holda balandlik o'zgarganda ish maydoni hisobi buzilardi. */ --nav-h: clamp(52px, 2vw + 40px, 64px); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Konteyner chekka bo'shlig'i — ekranga qarab suyuq */ --gutter: clamp(14px, 2.5vw, 32px); /* Sahifa maksimal kengligi */ --container-max: 1200px; /* Kabinet/admin ish maydonining maksimal kengligi. Marketing bo'limlaridan kengroq, chunki bu yerda jadval va ustunli panellar turadi. Ultra-keng monitorda kontent cheksiz cho'zilib ketmasligi uchun kerak: 3440px ekranda matn qatori o'qib bo'lmaydigan darajada uzayib ketardi. */ --shell-max: 1440px; /* ── TOUCH TARGET ────────────────────────────────────────────────── WCAG 2.5.8 (AA) minimumi 24px, Apple HIG va Material esa 44/48px tavsiya qiladi. Biz 44px ni asos qilamiz. */ --tap-min: 44px; --tap-min-compact: 36px; /* faqat zich jadval ichidagi ikonka tugmalar */ /* ── BREAKPOINTLAR (hujjat sifatida) ─────────────────────────────── CSS media query var() ni qabul qilmaydi, shuning uchun bu tokenlar faqat ma'lumot uchun. Shkala — besh pog'ona: --bp-xs: 480px telefon --bp-sm: 640px katta telefon --bp-md: 768px planshet / mobil chegara --bp-lg: 1024px kichik laptop --bp-xl: 1280px desktop Ilgari sahifa CSS larida 17 xil chegara bor edi (420, 560, 600, 900, 920, 950, 990, 1100 …) — bir xil vazifadagi bloklar turli nuqtada ishga tushardi va oraliq kengliklarda layout mos kelmay qolardi. Endi sahifa qatlamida faqat yuqoridagi beshtasi ishlatiladi. IKKI ISTISNO, ataylab: · constructor/* — muharrir asboblar panelining chegaralari uning haqiqiy kengligiga bog'liq (920/950/990/1180/1220/1400). Ularni shkalaga majburan tortish panelni yorib chiqaradi. · 769px — 768px ning `min-width` juftligi. YANGI kod uchun eng yaxshi yechim — breakpoint umuman yozmaslik: `repeat(auto-fit, minmax(min(NNNpx, 100%), 1fr))` har qanday kenglikka o'zi moslashadi (responsive.css dagi `.grid-auto`). */ --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ── Z QATLAMLAR ── */ --z-sticky: 50; --z-nav: 150; --z-drawer: 400; --z-modal: 1000; --z-toast: 10000; /* ── KONSTRUKTOR (EDITOR) ─────────────────────────────────────────── Sertifikat konstruktori — Figma uslubidagi ish maydoni. Bu yerda tarixiy muammo bor edi: konstruktor avval to'liq QORONG'I qilib yozilgan, keyin uning ustiga "PREMIUM LIGHT MODE OVERRIDES" nomli blok `!important` bilan yopishtirilgan. Natijada bitta komponentning rangi ikki joyda, ikki xil qiymat bilan turardi va override yetib bormagan joylarda qorong'i davr rangi qolib ketgan edi (oq panelda #CBD5E1 matn — deyarli ko'rinmaydi). Endi tuzilma bitta: komponent semantikasi (panel / karta / kontur / matn darajasi) qorong'i dizayndan olingan, qiymatlar esa shu yerdan keladi. Shu sababli konstruktor ham dark rejimni oladi. */ --editor-bg: #F1F5F9; /* ish maydoni foni */ --editor-header: rgba(255, 255, 255, .90); /* yuqori panel (blur ustida) */ --editor-panel: #FFFFFF; /* yon panellar */ --editor-panel-2: #F8FAFC; /* panel ichidagi karta */ --editor-panel-3: #EEF2F8; /* hover / tanlangan */ --editor-border: rgba(0, 0, 0, .06); --editor-border-2: rgba(0, 0, 0, .12); --editor-text: #0F172A; --editor-text-2: #334155; --editor-text-3: #475569; --editor-muted: #64748B; --editor-soft: #94A3B8; --editor-accent: #4F46E5; --editor-accent-2: #6366F1; /* Aksent to'ldirish — dark rejimda `--editor-accent` yorug'lashadi (#818CF8), oq matn esa unda 2.98:1 ga tushadi. Shu sababli to'ldirish alohida va har ikki rejimda bir xil. */ --editor-accent-fill: #4F46E5; --editor-accent-soft: rgba(79, 70, 229, .08); --editor-accent-ring: rgba(79, 70, 229, .25); --editor-input: #FFFFFF; --editor-input-border: #8B95A1; --editor-hover: rgba(0, 0, 0, .04); --editor-active: rgba(0, 0, 0, .08); --editor-scrim: rgba(15, 23, 42, .45); /* modal ortidagi qorayish */ /* ══════════════════════════════════════════════════════════════ LEGACY ALIAS — mavjud CSS fayllar shular orqali ishlaydi. ══════════════════════════════════════════════════════════════ */ --primary: var(--indigo-600); --primary-dark: var(--indigo-700); --primary-light: var(--indigo-050); --primary-glow: var(--indigo-glow); --accent: var(--cyan); --accent-glow: rgba(6, 182, 212, .18); --gold: var(--indigo-500); --gold-light: var(--indigo-100); --link: var(--indigo-600); --link-hover: var(--indigo-700); --success: var(--verified); --success-bg: var(--verified-bg); --danger: var(--revoked); --danger-bg: var(--revoked-bg); --warning: var(--pending); --bg: var(--paper); --bg-soft: var(--paper-raised); --surface: var(--paper-raised); --surface-2: var(--paper-2); --surface-3: var(--paper-3); --border: var(--rule); --border-strong: var(--rule-strong); --text: var(--ink-text); --text-2: var(--ink-text-2); --text-muted: var(--ink-muted); --text-soft: var(--ink-soft); --grad-gold: var(--grad-brass); --grad-surface: var(--grad-paper); --grad-bg: var(--grad-paper); /* landing.css meros nomlari */ --dark: var(--indigo-900); --muted: var(--ink-muted); --white: var(--paper-raised); --border-dark: rgba(255, 255, 255, .08); --glass-bg: rgba(255, 255, 255, .85); --glass-border: rgba(99, 102, 241, .18); /* verify.css meros nomlari */ --verify-accent: var(--indigo-600); } /* ══════════════════════════════════════════════════════════════════════ DARK — slate-900 yuzalar, yorqin indigo aksent ══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; --paper: #0B1220; --paper-2: #152033; --paper-3: #1D2A40; --paper-raised: #111C2F; --rule: #293750; --rule-strong: #43516B; --ink-text: #F1F5F9; --ink-text-2: #D5DCE8; --ink-muted: #A8B3C7; --ink-soft: #8D9AB2; --indigo-100: #24305A; --indigo-050: #1D2542; --indigo-700: #A5B4FC; /* dark'da matn uchun yorug' */ --indigo-600: #818CF8; --indigo-a12: rgba(129, 140, 248, .14); --indigo-a24: rgba(129, 140, 248, .24); --indigo-glow: rgba(99, 102, 241, .35); --brass-700: #A5B4FC; --brass-600: #818CF8; --brass: #818CF8; --brass-100: #24305A; --brass-050: #1D2542; --brass-a12: rgba(129, 140, 248, .14); --brass-a24: rgba(129, 140, 248, .24); --seal: #818CF8; --seal-lit: #A5B4FC; --seal-a12: rgba(129, 140, 248, .14); --sky-bg: rgba(59, 130, 246, .16); --cyan-bg: rgba(6, 182, 212, .16); --violet-bg: rgba(139, 92, 246, .18); --amber-bg: rgba(245, 158, 11, .16); --pink-bg: rgba(236, 72, 153, .16); --verified: #34D399; --verified-bg: rgba(52, 211, 153, .14); --revoked: #F87171; --revoked-bg: rgba(248, 113, 113, .14); --pending: #FBBF24; --pending-bg: rgba(251, 191, 36, .16); --info: #818CF8; --info-bg: rgba(129, 140, 248, .14); --success-fg: #4ADE80; --success-border: rgba(52, 211, 153, .35); --danger-fg: #FCA5A5; --danger-border: rgba(248, 113, 113, .35); --warning-fg: #FCD34D; --warning-border: rgba(251, 191, 36, .35); --info-fg: #A5B4FC; --info-border: rgba(129, 140, 248, .35); /* To'ldirish rangi dark rejimda ham o'zgarmaydi: oq matn bilan 6.29:1. Hover esa yorug'lashadi — qorong'i fonda o'sish tabiiy ko'rinadi va 5.38:1 bilan AA dan o'tadi. */ --brand-fill: #4F46E5; --brand-fill-hover: #5B54EA; /* Konstruktor — qorong'i rejim (asl Figma ko'rinishi) */ --editor-bg: #07090E; --editor-header: rgba(13, 18, 30, .85); --editor-panel: #0D121F; --editor-panel-2: #111726; --editor-panel-3: #161D2E; --editor-border: rgba(255, 255, 255, .06); --editor-border-2: rgba(255, 255, 255, .12); --editor-text: #F8FAFC; --editor-text-2: #E2E8F0; --editor-text-3: #CBD5E1; --editor-muted: #94A3B8; --editor-soft: #64748B; --editor-accent: #818CF8; --editor-accent-2: #A5B4FC; --editor-accent-soft: rgba(129, 140, 248, .16); --editor-accent-ring: rgba(129, 140, 248, .35); --editor-input: #111726; --editor-input-border: #606C85; --editor-hover: rgba(255, 255, 255, .05); --editor-active: rgba(255, 255, 255, .10); --editor-scrim: rgba(4, 7, 13, .70); --field-border: #606C85; --tooltip-bg: #E7ECF5; --tooltip-fg: #0F172A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-md: 0 8px 24px rgba(0, 0, 0, .50); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .60); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05); --shadow-brass: 0 6px 18px rgba(99, 102, 241, .3); --shadow-indigo: 0 6px 18px rgba(99, 102, 241, .3); --grad-paper: linear-gradient(180deg, #1B243F 0%, #17203A 100%); --primary-light: #1D2542; --glass-bg: rgba(17, 28, 47, .88); --white: var(--paper-raised); --dark: var(--ink-text); } /* Tizim sozlamasiga ergashish (data-theme o'rnatilmagan bo'lsa) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --paper: #0B1220; --paper-2: #152033; --paper-3: #1D2A40; --paper-raised: #111C2F; --rule: #293750; --rule-strong: #43516B; --ink-text: #F1F5F9; --ink-text-2: #D5DCE8; --ink-muted: #A8B3C7; --ink-soft: #8D9AB2; --indigo-100: #24305A; --indigo-050: #1D2542; --indigo-700: #A5B4FC; --indigo-600: #818CF8; --indigo-a12: rgba(129, 140, 248, .14); --indigo-a24: rgba(129, 140, 248, .24); --indigo-glow: rgba(99, 102, 241, .35); --brass-700: #A5B4FC; --brass-600: #818CF8; --brass: #818CF8; --brass-100: #24305A; --brass-050: #1D2542; --brass-a12: rgba(129, 140, 248, .14); --brass-a24: rgba(129, 140, 248, .24); --seal: #818CF8; --seal-lit: #A5B4FC; --seal-a12: rgba(129, 140, 248, .14); --sky-bg: rgba(59, 130, 246, .16); --cyan-bg: rgba(6, 182, 212, .16); --violet-bg: rgba(139, 92, 246, .18); --amber-bg: rgba(245, 158, 11, .16); --pink-bg: rgba(236, 72, 153, .16); --verified: #34D399; --verified-bg: rgba(52, 211, 153, .14); --revoked: #F87171; --revoked-bg: rgba(248, 113, 113, .14); --pending: #FBBF24; --pending-bg: rgba(251, 191, 36, .16); --info: #818CF8; --info-bg: rgba(129, 140, 248, .14); --success-fg: #4ADE80; --success-border: rgba(52, 211, 153, .35); --danger-fg: #FCA5A5; --danger-border: rgba(248, 113, 113, .35); --warning-fg: #FCD34D; --warning-border: rgba(251, 191, 36, .35); --info-fg: #A5B4FC; --info-border: rgba(129, 140, 248, .35); /* To'ldirish rangi dark rejimda ham o'zgarmaydi: oq matn bilan 6.29:1. Hover esa yorug'lashadi — qorong'i fonda o'sish tabiiy ko'rinadi va 5.38:1 bilan AA dan o'tadi. */ --brand-fill: #4F46E5; --brand-fill-hover: #5B54EA; /* Konstruktor — qorong'i rejim (asl Figma ko'rinishi) */ --editor-bg: #07090E; --editor-header: rgba(13, 18, 30, .85); --editor-panel: #0D121F; --editor-panel-2: #111726; --editor-panel-3: #161D2E; --editor-border: rgba(255, 255, 255, .06); --editor-border-2: rgba(255, 255, 255, .12); --editor-text: #F8FAFC; --editor-text-2: #E2E8F0; --editor-text-3: #CBD5E1; --editor-muted: #94A3B8; --editor-soft: #64748B; --editor-accent: #818CF8; --editor-accent-2: #A5B4FC; --editor-accent-soft: rgba(129, 140, 248, .16); --editor-accent-ring: rgba(129, 140, 248, .35); --editor-input: #111726; --editor-input-border: #606C85; --editor-hover: rgba(255, 255, 255, .05); --editor-active: rgba(255, 255, 255, .10); --editor-scrim: rgba(4, 7, 13, .70); --field-border: #606C85; --tooltip-bg: #E7ECF5; --tooltip-fg: #0F172A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 2px 8px rgba(0, 0, 0, .45); --shadow-md: 0 8px 24px rgba(0, 0, 0, .50); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .60); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05); --shadow-brass: 0 6px 18px rgba(99, 102, 241, .3); --shadow-indigo: 0 6px 18px rgba(99, 102, 241, .3); --grad-paper: linear-gradient(180deg, #1B243F 0%, #17203A 100%); --primary-light: #1D2542; --glass-bg: rgba(17, 28, 47, .88); --white: var(--paper-raised); --dark: var(--ink-text); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }