/* ============================================================ ZamaCards — дизайн-токены Источник правды для всех цветов, размеров и отступов. Хардкод значений в компонентах запрещён — только var(--*). ТРИ ТЕМЫ. Переключаются атрибутом на : зелёная, по умолчанию чёрная, OLED белая Семантические имена токенов во всех темах ОДИНАКОВЫЕ. Компонент никогда не знает, какая тема активна. Контрасты посчитаны, обоснования: docs/design/COLORS.md ============================================================ */ /* ============================================================ ТЕМА 1 — OBSIDIAN (зелёная, по умолчанию) ============================================================ */ :root, [data-theme="obsidian"] { color-scheme: dark; --color-bg: #0B1110; --color-surface-1: #121A18; --color-surface-2: #1A2422; --color-surface-3: #232F2B; --color-primary: #1F6B52; /* белый текст: 6.40 */ --color-primary-hover: #25765A; /* белый текст: 5.50 */ --color-primary-press: #185540; /* белый текст: 8.71 */ --color-text-on-primary: #FFFFFF; --color-accent: #5FBF8F; /* на bg: 8.47 */ --color-accent-glow: #2B8A68; /* фокус, обводка. НЕ для текста */ --color-balance: #8FD8B2; /* на surface-1: 10.65 */ --color-text: #F4F6F5; /* 17.56 */ --color-text-2: #A5B2AE; /* 8.69 */ --color-text-3: #7B8783; /* 5.11 */ --color-text-disabled: #4E5B56; --color-border-subtle: #22322D; --color-border: #2B3E37; --color-border-strong: #3D4542; --color-success: #5ECA91; --color-warning: #E4BB5F; --color-danger: #E97265; --color-info: #7BBCD5; --color-success-bg: #1D3329; --color-warning-bg: #2F3122; --color-danger-bg: #302623; --color-info-bg: #213132; --color-accent-bg: #1D3129; --color-logo: #5FBF8F; --color-logo-wordmark: #F4F6F5; --gradient-ambient: radial-gradient(120% 80% at 50% 0%, #123126 0%, #0B1110 60%); --gradient-card: linear-gradient(135deg, #16382C 0%, #1F6B52 100%); --gradient-veil: linear-gradient(180deg, rgba(6,9,8,0) 0%, rgba(6,9,8,0.92) 100%); --card-obsidian: linear-gradient(150deg, #0E1513 0%, #060908 55%, #12241D 100%); --card-forest: linear-gradient(160deg, #0B1110 0%, #16382C 60%, #1F6B52 100%); --card-emerald: linear-gradient(140deg, #103026 0%, #1F6B52 70%, #2B8A68 100%); --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.6); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.7); } /* ============================================================ ТЕМА 2 — BASALT (чёрная, OLED) Грунты нейтральные, без зелёного подмеса — этим и отличается от Obsidian. Зелёный остаётся только как акцент. На OLED чистый чёрный не потребляет питание — отсюда #000000. ============================================================ */ [data-theme="basalt"] { color-scheme: dark; --color-bg: #000000; --color-surface-1: #0D0D0D; --color-surface-2: #171717; --color-surface-3: #212121; --color-primary: #1F6B52; /* белый текст: 6.40 */ --color-primary-hover: #25765A; /* белый текст: 5.50 */ --color-primary-press: #185540; /* белый текст: 8.71 */ --color-text-on-primary: #FFFFFF; --color-accent: #5FBF8F; /* на bg: 9.34 */ --color-accent-glow: #2B8A68; --color-balance: #8FD8B2; /* на surface-1: 11.69 */ --color-text: #FAFAFA; /* 20.12 */ --color-text-2: #A1A1A1; /* 8.13 */ --color-text-3: #787878; /* 4.76 */ --color-text-disabled: #4A4A4A; --color-border-subtle: #1F1F1F; --color-border: #2E2E2E; --color-border-strong: #404040; --color-success: #5ECA91; --color-warning: #E4BB5F; --color-danger: #E97265; --color-info: #7BBCD5; --color-success-bg: #18271F; --color-warning-bg: #2B2518; --color-danger-bg: #2C1B19; --color-info-bg: #1C2629; --color-accent-bg: #18261F; --color-logo: #5FBF8F; --color-logo-wordmark: #FAFAFA; /* Без ambient-градиента: он бы съел смысл чистого чёрного на OLED */ --gradient-ambient: none; --gradient-card: linear-gradient(135deg, #10231B 0%, #1F6B52 100%); --gradient-veil: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.94) 100%); --card-obsidian: linear-gradient(150deg, #0A0A0A 0%, #000000 55%, #0F1D18 100%); --card-forest: linear-gradient(160deg, #000000 0%, #123024 60%, #1F6B52 100%); --card-emerald: linear-gradient(140deg, #0C2A20 0%, #1F6B52 70%, #2B8A68 100%); --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.85); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.9); } /* ============================================================ ТЕМА 3 — SNOW (белая) Зелёные пришлось посадить: #5FBF8F на белом даёт 2.25 — как текст не годится. Акцент здесь #15694E (6.64). Бренд держится не яркостью зелёного, а его глубиной. ============================================================ */ [data-theme="snow"] { color-scheme: light; --color-bg: #FFFFFF; --color-surface-1: #F5F8F6; --color-surface-2: #EDF2EF; --color-surface-3: #E3EAE6; --color-primary: #1B6149; /* белый текст: 7.36 */ --color-primary-hover: #155039; /* белый текст: 9.38 */ --color-primary-press: #0F4230; /* белый текст: 11.40 */ --color-text-on-primary: #FFFFFF; --color-accent: #15694E; /* на bg: 6.64 */ --color-accent-glow: #2F8364; /* фокус. НЕ для текста */ --color-balance: #0F5C42; /* на surface-1: 7.47 */ --color-text: #0B1110; /* 19.06 */ --color-text-2: #48544F; /* 7.90 */ --color-text-3: #6B7873; /* 4.61 */ --color-text-disabled: #A3ADA9; --color-border-subtle: #E2E8E5; --color-border: #BFCBC6; /* на bg 1.67, на surface-1 1.56 */ --color-border-strong: #A9B5B0; --color-success: #0E6B42; /* 6.56 */ --color-warning: #7D5100; /* 6.89 */ --color-danger: #A81F17; /* 7.31 */ --color-info: #175F82; /* 7.01 */ --color-success-bg: #E2EDE8; --color-warning-bg: #EFEAE0; --color-danger-bg: #F5E4E3; --color-info-bg: #E3ECF0; --color-accent-bg: #E3EDEA; --color-logo: #1F6B52; /* на белом: 6.40 */ --color-logo-wordmark: #0B1110; --gradient-ambient: radial-gradient(120% 80% at 50% 0%, #EAF2EE 0%, #FFFFFF 60%); --gradient-card: linear-gradient(135deg, #16382C 0%, #1F6B52 100%); --gradient-veil: linear-gradient(180deg, rgba(11,17,16,0) 0%, rgba(11,17,16,0.45) 100%); /* Карты остаются тёмными во всех темах — это физический объект бренда, он не должен менять цвет вместе с интерфейсом */ --card-obsidian: linear-gradient(150deg, #0E1513 0%, #060908 55%, #12241D 100%); --card-forest: linear-gradient(160deg, #0B1110 0%, #16382C 60%, #1F6B52 100%); --card-emerald: linear-gradient(140deg, #103026 0%, #1F6B52 70%, #2B8A68 100%); /* В светлой теме тени работают — в отличие от тёмных */ --shadow-sheet: 0 -8px 40px rgba(11, 17, 16, 0.16); --shadow-modal: 0 16px 48px rgba(11, 17, 16, 0.22); } /* ============================================================ ОБЩЕЕ ДЛЯ ВСЕХ ТЕМ Ниже нет ни одного цвета — только размеры, время и форма. ============================================================ */ :root { /* ---------- ТИПОГРАФИКА ---------- Manrope — интерфейс. JetBrains Mono — номера карт, коды, суммы. */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 44px; /* баланс на главной */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* только логотип и баланс */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* ---------- ПРОСТРАНСТВО — сетка 4px ---------- */ --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; --screen-padding: var(--space-4); --tap-target: 44px; /* минимальная тач-цель, не уменьшать */ --bottom-safe: 88px; /* зона под палец на обычной веб-странице */ /* В Telegram Mini App низ экрана держит сам клиент: там уже есть системная полоса и safe-area. Поэтому нижняя навигация и кнопки прижимаются к --safe-bottom, а не к --bottom-safe — иначе внизу висит пустая полоса. */ --safe-bottom: env(safe-area-inset-bottom, 0px); --tabbar-h: 62px; /* ---------- ФОРМА ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-card: 18px; --radius-full: 999px; --border-width: 1px; /* ---------- ДВИЖЕНИЕ ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 200ms; --duration-slow: 250ms; /* потолок */ /* ---------- СЛОИ ---------- */ --z-base: 0; --z-sticky: 10; --z-nav: 20; --z-veil: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60; } /* Кольцо фокуса собирается из токенов темы, поэтому объявлено отдельно */ :root, [data-theme] { --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-glow); } /* ============================================================ БАЗА ============================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); background-image: var(--gradient-ambient); background-attachment: fixed; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); } /* Цифры, которые выстраиваются в колонку, не должны прыгать */ .amount, .balance, table td, [data-numeric] { font-variant-numeric: tabular-nums; } /* Реквизиты карты — моно, с воздухом между группами */ .card-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Широкое содержимое скроллится внутри себя, а не ломает страницу */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }