/* ============================================================================ CLAUDE — dizayn tokenlari Yoʼnalish: "Oltin & Siyoh" · Ultra Modern Minimalist ========================================================================= */ :root { /* ── Rang: yorugʼ rejim ─────────────────────────────────────────────── */ --ink: #0B0B0C; /* asosiy matn, tugmalar */ --ink-2: #35343A; /* ikkilamchi matn */ --stone: #8A8580; /* uchinchi darajali matn, izohlar */ --paper: #FBFAF8; /* sahifa foni */ --surface: #FFFFFF; /* kartochka, sheet */ --sand: #EFEBE4; /* rasm oʼrni, yumshoq blok */ --sand-2: #F5F2EC; /* eng yengil fon */ --line: #E4DED4; /* chegara */ --line-soft: #EFEAE2; --gold: #C1A57B; /* urgʼu: narx, faol holat */ --gold-deep: #9C8258; /* oltin ustidagi matn/kontrast */ --gold-wash: #F4EDE0; /* oltin fon (badge) */ --success: #2E7D5B; --success-wash: #E6F2EC; --danger: #B4453C; --danger-wash: #FBEAE8; --on-ink: #FBFAF8; /* qora ustidagi matn */ --scrim: rgba(11, 11, 12, 0.55); --scrim-strong: rgba(11, 11, 12, 0.72); /* ── Tipografika ────────────────────────────────────────────────────── */ /* Inter Tight ixtiyoriy (npm run fonts). Boʼlmasa tizim shrifti — iOS: SF Pro, Android: Roboto. Ikkalasi ham kirillni qoʼllab-quvvatlaydi. */ --font-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-num: var(--font-ui); --fs-11: 0.6875rem; /* 11 — mayda yorliq */ --fs-12: 0.75rem; /* 12 — badge, izoh */ --fs-13: 0.8125rem; /* 13 — ikkilamchi */ --fs-15: 0.9375rem; /* 15 — asosiy matn */ --fs-17: 1.0625rem; /* 17 — muhim matn, narx */ --fs-22: 1.375rem; /* 22 — bloklar sarlavhasi */ --fs-28: 1.75rem; /* 28 — ekran sarlavhasi */ --fs-40: 2.5rem; /* 40 — banner sarlavhasi */ --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.5; --ls-display: -0.035em; /* katta sarlavhalarda zich */ --ls-title: -0.02em; --ls-body: -0.005em; --ls-caps: 0.14em; /* kichik CAPS yorliqlar */ --ls-wordmark: 0.4em; /* "C L A U D E" */ /* ── Oraliq (4px shkala) ────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --gutter: 1rem; /* ekran yon chekkasi */ --grid-gap: 0.75rem; /* Ilova ustunining eng katta kengligi. Mini App Telegram Desktop va Web'da keng oynada ham ochiladi — cheklamasak banner ekranni toʼliq egallab, mobil dizayn tili buziladi. */ --app-max: 540px; /* ── Shakl ──────────────────────────────────────────────────────────── */ --r-sm: 0.5rem; --r-md: 0.875rem; --r-lg: 1.125rem; /* kartochka */ --r-xl: 1.5rem; /* sheet, banner */ --r-full: 999px; --bw: 1px; /* ── Soya — juda tejamkor, asosan chegara ishlatiladi ───────────────── */ --sh-1: 0 1px 2px rgba(11, 11, 12, 0.05); --sh-2: 0 4px 16px rgba(11, 11, 12, 0.07); --sh-3: 0 12px 40px rgba(11, 11, 12, 0.12); --sh-up: 0 -6px 24px rgba(11, 11, 12, 0.08); /* ── Harakat ────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 160ms; --t-base: 260ms; --t-slow: 380ms; /* ── Qatlamlar ──────────────────────────────────────────────────────── */ --z-header: 40; --z-sticky: 50; --z-sheet: 60; --z-toast: 70; /* ── Telegram xavfsiz zonalari ──────────────────────────────────────── */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: light; } /* ── Qorongʼi rejim ─────────────────────────────────────────────────────── Telegram mavzusiga qarab qoʼyiladi (tg.js). Tizim sozlamasi ham hisobga olinadi. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink: #F4F1EC; --ink-2: #C3BEB6; --stone: #8B857D; --paper: #0C0C0D; --surface: #141416; --sand: #1D1C1E; --sand-2: #171718; --line: #2A2A2D; --line-soft: #232326; --gold: #D4BC94; --gold-deep: #E8D6B4; --gold-wash: #262117; --success: #62B58C; --success-wash: #16261E; --danger: #E08076; --danger-wash: #2A1917; --on-ink: #0C0C0D; --scrim: rgba(0, 0, 0, 0.6); --scrim-strong: rgba(0, 0, 0, 0.78); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 16px rgba(0, 0, 0, 0.45); --sh-3: 0 12px 40px rgba(0, 0, 0, 0.6); --sh-up: 0 -6px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } } :root[data-theme='dark'] { --ink: #F4F1EC; --ink-2: #C3BEB6; --stone: #8B857D; --paper: #0C0C0D; --surface: #141416; --sand: #1D1C1E; --sand-2: #171718; --line: #2A2A2D; --line-soft: #232326; --gold: #D4BC94; --gold-deep: #E8D6B4; --gold-wash: #262117; --success: #62B58C; --success-wash: #16261E; --danger: #E08076; --danger-wash: #2A1917; --on-ink: #0C0C0D; --scrim: rgba(0, 0, 0, 0.6); --scrim-strong: rgba(0, 0, 0, 0.78); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 16px rgba(0, 0, 0, 0.45); --sh-3: 0 12px 40px rgba(0, 0, 0, 0.6); --sh-up: 0 -6px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* Harakatni kamaytirish soʼralgan boʼlsa — hamma joyda hurmat qilinadi */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } }