/* ============================================================================ * AI Smart Family Budget — Design Tokens * Generated from DESIGN.md. DO NOT EDIT BY HAND. * Regenerate via: npx -y @google/design.md export --format tailwind * (then convert to CSS variables) or update DESIGN.md. * ============================================================================ */ :root { /* ─── Colors: Ink & Surface ───────────────────────────────────────── */ --color-ink: #0F172A; --color-surface: #FFFFFF; --color-surface-2: #F8FAFC; --color-surface-3: #E2E8F0; /* ─── Colors: Text ─────────────────────────────────────────────────── */ --color-text: #1E293B; --color-text-muted: #475569; /* slate-600, WCAG AA on white = 7.5:1 */ --color-text-inverse: #F8FAFC; --color-text-on-accent: #FFFFFF; /* ─── Colors: Brand Accent (зелёный, «семейный бюджет») ─────────────── */ --color-accent: #10B981; /* emerald-500, light fills/badges */ --color-accent-strong: #047857; /* emerald-700, primary CTA bg (WCAG AA) */ --color-accent-hover: #065F46; /* emerald-800, hover */ --color-accent-soft: #D1FAE5; /* emerald-100, badge bg */ --color-accent-ink: #064E3B; /* emerald-900, text on accent-soft */ /* ─── Colors: Telegram (только Login Widget CTA) ───────────────────── */ --color-tg-blue: #0088CC; /* иконка, link */ --color-tg-blue-strong: #006699; /* CTA bg, WCAG AA */ --color-tg-blue-hover: #004C73; /* CTA hover */ /* ─── Colors: Semantic ─────────────────────────────────────────────── */ --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; /* ─── Typography: Fonts ───────────────────────────────────────────── */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ─── Type Scale (Major Third 1.250) ──────────────────────────────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* ─── Spacing (4px grid) ──────────────────────────────────────────── */ --space-0: 0; --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; --space-20: 80px; --space-24: 96px; /* ─── Rounded ─────────────────────────────────────────────────────── */ --rounded-none: 0; --rounded-sm: 4px; --rounded-md: 8px; --rounded-lg: 12px; --rounded-xl: 16px; --rounded-2xl: 24px; --rounded-full: 9999px; /* ─── Shadows (тёплые, RGB-mixed с ink) ───────────────────────────── */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06); --shadow-md: 0 2px 4px 0 rgb(15 23 42 / 0.05), 0 4px 8px 0 rgb(15 23 42 / 0.08); --shadow-lg: 0 4px 8px 0 rgb(15 23 42 / 0.06), 0 12px 24px 0 rgb(15 23 42 / 0.10); --shadow-xl: 0 8px 16px 0 rgb(15 23 42 / 0.08), 0 24px 48px 0 rgb(15 23 42 / 0.14); --shadow-focus: 0 0 0 3px rgb(16 185 129 / 0.35); --shadow-inset: inset 0 2px 4px 0 rgb(15 23 42 / 0.05); /* ─── Motion ──────────────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================================ * Optional: Dark mode (не активирован по умолчанию). * Включается атрибутом [data-theme="dark"] на или . * ============================================================================ */ [data-theme="dark"] { --color-ink: #F8FAFC; --color-surface: #0F172A; --color-surface-2: #1E293B; --color-surface-3: #334155; --color-text: #F1F5F9; --color-text-muted: #94A3B8; --color-text-inverse: #0F172A; /* accent / semantic остаются — зелёный читается на обоих */ } /* ============================================================================ * Reset & Base — minimal, non-destructive * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; color: var(--color-text); background: var(--color-surface); font-feature-settings: "cv11", "ss01"; /* Inter stylistic alternates */ } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--color-ink); } h1 { font-size: var(--text-4xl); line-height: 1.1; } h2 { font-size: var(--text-3xl); line-height: 1.2; } h3 { font-size: var(--text-2xl); line-height: 1.3; font-weight: 600; } h4 { font-size: var(--text-xl); line-height: 1.4; font-weight: 600; } p { margin: 0 0 var(--space-3) 0; } a { color: var(--color-accent-strong); text-decoration: none; transition: color var(--motion-fast) var(--motion-easing); } a:hover { color: var(--color-accent-hover); } a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--rounded-sm); } /* ============================================================================ * Component classes (consume tokens; semantic names) * ============================================================================ */ /* ─── Buttons ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 10px var(--space-4); font: 600 var(--text-sm) / 1 var(--font-sans); border: 1px solid transparent; border-radius: var(--rounded-md); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing); text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--color-accent-strong); color: var(--color-text-on-accent); border-color: var(--color-accent-strong); } .btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface-3); } .btn--secondary:hover:not(:disabled) { background: var(--color-surface-2); border-color: var(--color-text-muted); } .btn--telegram { background: var(--color-tg-blue-strong); color: #FFFFFF; border-color: var(--color-tg-blue-strong); min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--text-base); } .btn--telegram:hover:not(:disabled) { background: var(--color-tg-blue-hover); border-color: var(--color-tg-blue-hover); } .btn--ghost { background: transparent; color: var(--color-accent-strong); border-color: transparent; } .btn--ghost:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent-ink); } .btn--lg { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--text-base); } .btn--sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); } /* ─── Cards ────────────────────────────────────────────────────────── */ .card { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-surface-3); border-radius: var(--rounded-lg); padding: var(--space-6); } .card--elevated { box-shadow: var(--shadow-md); border-color: transparent; } .card--hero { background: var(--color-ink); color: var(--color-text-inverse); border-radius: var(--rounded-2xl); padding: var(--space-12); border-color: transparent; } .card--hero h1, .card--hero h2, .card--hero h3, .card--hero h4 { color: var(--color-text-inverse); } /* ─── Inputs ───────────────────────────────────────────────────────── */ .input, input[type="text"].input, input[type="email"].input, input[type="password"].input, input[type="number"].input { display: block; width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); font: 400 var(--text-base) / 1.5 var(--font-sans); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-surface-3); border-radius: var(--rounded-sm); transition: border-color var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing); } .input:focus, input.input:focus { outline: none; border-color: var(--color-accent-strong); box-shadow: var(--shadow-focus); } .input--error, input.input--error { border-color: var(--color-danger); } .input--error:focus, input.input--error:focus { box-shadow: 0 0 0 3px rgb(239 68 68 / 0.25); } .input-helper { display: block; margin-top: var(--space-1); font: 500 var(--text-xs) / 1 var(--font-sans); color: var(--color-text-muted); } .input-helper--error { color: var(--color-danger); } /* ─── Labels ───────────────────────────────────────────────────────── */ .label { display: block; margin-bottom: var(--space-1); font: 500 var(--text-sm) / 1.25 var(--font-sans); color: var(--color-text); } /* ─── Badges ───────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); font: 500 var(--text-xs) / 1.25 var(--font-sans); letter-spacing: 0.02em; border-radius: var(--rounded-full); white-space: nowrap; } .badge--success { background: var(--color-accent-soft); color: var(--color-accent-ink); } .badge--warning { background: #FEF3C7; color: #92400E; } .badge--danger { background: #FEE2E2; color: #991B1B; } .badge--info { background: #DBEAFE; color: #1E40AF; } .badge--neutral { background: var(--color-surface-2); color: var(--color-text-muted); } /* ─── Amounts (числовой формат) ────────────────────────────────────── */ .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; } .amount--md { font-size: var(--text-lg); } .amount--lg { font-size: var(--text-2xl); font-weight: 700; } .amount--positive { color: var(--color-success); } .amount--negative { color: var(--color-danger); } .amount--neutral { color: var(--color-text); } /* ─── Nav (TMA bottom nav) ─────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font: 500 var(--text-sm) / 1 var(--font-sans); color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--rounded-md); cursor: pointer; text-decoration: none; transition: background-color var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing); } .nav-item:hover { color: var(--color-text); background: var(--color-surface-2); } .nav-item--active { color: var(--color-accent-ink); background: var(--color-accent-soft); } .nav-item--active:hover { color: var(--color-accent-ink); background: var(--color-accent-soft); } /* ─── Transaction row (TMA list) ──────────────────────────────────── */ .txn-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-surface-3); transition: background-color var(--motion-fast) var(--motion-easing); } .txn-row:hover { background: var(--color-surface-2); } .txn-row:last-child { border-bottom: 0; } .txn-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .txn-row__title { font: 500 var(--text-sm) / 1.25 var(--font-sans); color: var(--color-text); } .txn-row__meta { font: 400 var(--text-xs) / 1 var(--font-sans); color: var(--color-text-muted); } /* ─── Family card (TMA header) ────────────────────────────────────── */ .family-card { background: var(--color-surface); border: 1px solid var(--color-surface-3); border-radius: var(--rounded-lg); padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* ============================================================================ * Utility classes * ============================================================================ */ .container { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 var(--space-4); } .container--sm { max-width: 640px; } .container--md { max-width: 768px; } .container--lg { max-width: 1024px; } .container--xl { max-width: 1280px; } .stack > * + * { margin-top: var(--space-3); } .stack--lg > * + * { margin-top: var(--space-6); } .muted { color: var(--color-text-muted); } .text-center { text-align: center; } .tabular { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }