/* DESIGN.md — токены публичной витрины Xamar. Панель не подключает этот файл и сохраняет свои slate-токены. */ :root { --x-canvas: #f7f7f7; --x-surface: #ffffff; --x-surface-hover: #fafafa; --x-text-primary: #222222; --x-text-secondary: #6a6a6a; --x-text-tertiary: #9a9a9a; --x-text-inverse: #ffffff; --x-accent: #A62B1F; --x-accent-hover: #7E1F16; --x-accent-soft: rgba(166, 43, 31, 0.12); --x-hairline: rgba(0, 0, 0, 0.08); --x-hairline-strong: rgba(0, 0, 0, 0.14); --x-success: #2F7D57; --x-warning: #B07A1E; --x-danger: #B23A3A; --x-font-sans: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif; --x-fs-body: 14px; --x-fs-ui: 16px; --x-fs-subheading: 20px; --x-fs-heading: 22px; --x-fs-title: 28px; --x-fw-regular: 400; --x-fw-medium: 500; --x-fw-semibold: 600; --x-fw-bold: 700; --x-lh-body: 1.43; --x-lh-ui: 1.25; --x-lh-heading: 1.18; --x-tracking-tight: -0.02em; --x-tracking-none: 0; --x-space-1: 4px; --x-space-2: 8px; --x-space-3: 12px; --x-space-4: 16px; --x-space-5: 24px; --x-space-6: 32px; --x-space-7: 48px; --x-space-8: 64px; --x-section-gap-desktop: 64px; --x-section-gap-mobile: 40px; --x-container-max: 1280px; --x-container-pad: 24px; --x-radius-card: 12px; --x-radius-button: 8px; --x-radius-pill: 9999px; --x-radius-input: 8px; --x-radius-image: 12px; --x-shadow-search: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08); --x-shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); --x-dur-fast: 150ms; --x-dur-base: 200ms; --x-dur-slow: 250ms; --x-ease: cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 767px) { :root { --x-container-pad: 16px; --x-section-gap-desktop: 40px; } } /* Публичные страницы: старые --home-* / --color-* смотрят на новые токены. Панель без .site-body сохраняет slate из base.css. */ body.site-body, body.home-body { --home-primary: var(--x-accent); --home-primary-deep: var(--x-accent-hover); --home-primary-hover: var(--x-accent-hover); --home-primary-light: var(--x-accent-soft); --home-primary-soft: var(--x-hairline-strong); --home-primary-shadow: rgba(227, 28, 95, 0.22); --home-primary-shadow-hover: rgba(227, 28, 95, 0.3); --home-accent: var(--x-accent); --home-accent-deep: var(--x-accent-hover); --home-accent-light: var(--x-accent-soft); --home-accent-shadow: rgba(227, 28, 95, 0.18); --home-accent-shadow-hover: rgba(227, 28, 95, 0.28); --home-warm: var(--x-accent); --home-warm-light: var(--x-accent-soft); --home-warm-border: var(--x-hairline-strong); --home-bg: var(--x-canvas); --home-surface: var(--x-surface); --home-surface-tint: var(--x-surface-hover); --home-surface-hover: var(--x-surface-hover); --home-text: var(--x-text-primary); --home-text-secondary: var(--x-text-secondary); --home-text-muted: var(--x-text-tertiary); --home-border: var(--x-hairline); --home-border-strong: var(--x-hairline-strong); --home-success: var(--x-success); --home-error: var(--x-danger); --home-warning: var(--x-warning); --home-danger: var(--x-danger); --home-danger-deep: var(--x-accent-hover); --home-danger-light: var(--x-accent-soft); --home-radius: var(--x-radius-card); --home-radius-sm: var(--x-radius-image); --home-radius-md: var(--x-radius-card); --home-card: var(--x-surface); --home-shadow-xs: none; --home-shadow-sm: none; --home-shadow: none; --home-shadow-md: none; --home-shadow-lg: var(--x-shadow-overlay); --shadow-btn: none; --shadow-btn-hover: none; --shadow-btn-active: none; --home-focus-ring: 0 0 0 2px var(--x-surface), 0 0 0 4px var(--x-accent); --home-focus-ring-danger: 0 0 0 2px var(--x-surface), 0 0 0 4px var(--x-danger); --font-sans: var(--x-font-sans); --color-primary: var(--x-accent); --color-primary-deep: var(--x-accent-hover); --color-primary-light: var(--x-accent-soft); --color-accent: var(--x-accent); --color-accent-deep: var(--x-accent-hover); --color-accent-light: var(--x-accent-soft); --color-accent-mid: var(--x-accent-hover); --color-background: var(--x-canvas); --color-surface: var(--x-surface); --color-surface-tint: var(--x-surface-hover); --color-border: var(--x-hairline); --color-text: var(--x-text-primary); --color-text-secondary: var(--x-text-secondary); --color-text-muted: var(--x-text-tertiary); --color-success: var(--x-success); --color-error: var(--x-danger); --color-warning: var(--x-warning); --color-danger: var(--x-danger); } body.site-body, body.home-body { font-family: var(--x-font-sans); font-size: var(--x-fs-body); font-weight: var(--x-fw-regular); line-height: var(--x-lh-body); color: var(--x-text-primary); background: var(--x-canvas); font-synthesis: none; } body.site-body :focus-visible, body.home-body :focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; } body.site-body .btn, body.home-body .btn, body.site-body .btn-primary, body.home-body .btn-primary, body.site-body .btn--primary, body.home-body .btn--primary, body.site-body .btn-secondary, body.home-body .btn-secondary, body.site-body .btn-outline, body.home-body .btn-outline, body.site-body .btn-ghost, body.home-body .btn-ghost, body.site-body .btn-accent, body.home-body .btn-accent { border-radius: var(--x-radius-button); box-shadow: none; } body.site-body .btn-primary, body.home-body .btn-primary, body.site-body .btn--primary, body.home-body .btn--primary, body.site-body .btn-accent, body.home-body .btn-accent { background: var(--x-accent); border-color: var(--x-accent); color: var(--x-text-inverse); } body.site-body .btn-primary:hover, body.home-body .btn-primary:hover, body.site-body .btn--primary:hover, body.home-body .btn--primary:hover, body.site-body .btn-accent:hover, body.home-body .btn-accent:hover { background: var(--x-accent-hover); border-color: var(--x-accent-hover); box-shadow: none; } @media (prefers-reduced-motion: reduce) { body.site-body *, body.home-body * { scroll-behavior: auto !important; } body.site-body img, body.home-body img { transition: none !important; } }