/* ============================================================================ GOSOFT — DESIGN TOKENS (css/tokens.css) Единый источник правды для цвета, типографики, глубины, радиусов, отступов и анимации. Подключается ПЕРВЫМ, до style.css. ── Как этим пользоваться ────────────────────────────────────────────────── В новом коде используйте только токены `--gs-*`. Старые имена (--primary-blue, --card-gray …) сохранены в конце файла как алиасы: они ссылаются на новые значения, поэтому 13 649 строк style.css продолжают работать без единой правки. Постепенно заменяя старое имя на новое, вы нигде ничего не ломаете. ── Правила ──────────────────────────────────────────────────────────────── 1. Не добавляйте хардкод-цвет в компонент — заведите или возьмите токен. 2. Шкалы 50…900: чем больше число, тем темнее/плотнее. 3. Значения шкал взяты из реального кода темы, а не выдуманы: кегли 13/14/15/16/17/19/25px и радиусы 5/11/100px — самые частые. Created: 2026-08-25 ========================================================================== */ :root { /* ========================================================================== 1. ЦВЕТ — ПАЛИТРА (сырые значения, в компонентах напрямую не используются) ========================================================================== */ /* Бренд — синий: действие, ссылки, акцент */ --gs-blue-50: #e8f3ff; --gs-blue-100: #cbe5ff; --gs-blue-200: #a3d2ff; --gs-blue-300: #66b3ff; --gs-blue-400: #2f9aff; --gs-blue-500: #0083ff; /* базовый бренд-цвет */ --gs-blue-600: #0073ef; /* hover / active */ --gs-blue-700: #0060c8; --gs-blue-800: #004a99; --gs-blue-900: #003a78; /* Бренд — оранжевый: цена, покупка, срочность */ --gs-orange-50: #fff4ec; --gs-orange-100: #ffddc4; --gs-orange-200: #ffc49b; --gs-orange-300: #ffa666; --gs-orange-400: #ff8533; --gs-orange-500: #ff6600; /* базовый CTA-цвет */ --gs-orange-600: #e85c00; --gs-orange-700: #c24d00; --gs-orange-800: #a83f00; --gs-orange-900: #8f3600; /* Нейтральные — текст, фон, границы */ --gs-neutral-0: #ffffff; --gs-neutral-25: #fcfcfc; --gs-neutral-50: #f6f9fd; --gs-neutral-100: #eef4fb; --gs-neutral-150: #e6ecf3; --gs-neutral-200: #ebebeb; --gs-neutral-300: #cbcbcb; --gs-neutral-400: #949ba1; --gs-neutral-500: #818181; --gs-neutral-600: #4d565f; --gs-neutral-700: #3a4148; --gs-neutral-800: #272a2d; /* основной цвет текста темы */ --gs-neutral-900: #1b1f24; --gs-neutral-950: #16191c; /* Статусы */ --gs-success-500: #0baf03; --gs-success-700: #077a02; /* тёмный вариант — для мелкого текста, 5.5:1 */ --gs-success-50: #e8f7e7; --gs-danger-500: #e33c3c; --gs-danger-700: #b32626; --gs-danger-50: #fdecec; --gs-warning-500: #ffdd2d; --gs-warning-700: #8a6d00; --gs-warning-50: #fffae6; /* ========================================================================== 2. ЦВЕТ — СЕМАНТИКА (это и используем в компонентах) ========================================================================== */ /* Поверхности */ --gs-surface: var(--gs-neutral-0); --gs-surface-sunken: var(--gs-neutral-50); --gs-surface-muted: var(--gs-neutral-100); --gs-surface-inverse: #1c2024; --gs-surface-brand: var(--gs-blue-50); --gs-surface-sale: var(--gs-orange-50); /* Текст */ --gs-text: var(--gs-neutral-800); --gs-text-strong: var(--gs-neutral-900); --gs-text-muted: var(--gs-neutral-600); --gs-text-subtle: var(--gs-neutral-400); --gs-text-inverse: var(--gs-neutral-0); --gs-text-inverse-muted: #b6c0cb; --gs-text-link: var(--gs-blue-600); --gs-text-price: var(--gs-orange-500); /* Границы */ --gs-border: var(--gs-neutral-150); --gs-border-strong: var(--gs-neutral-300); --gs-border-subtle: rgba(23, 30, 38, 0.06); --gs-border-inverse: rgba(255, 255, 255, 0.14); /* Действия */ --gs-action: var(--gs-blue-500); --gs-action-hover: var(--gs-blue-600); --gs-action-active: var(--gs-blue-700); --gs-buy: var(--gs-orange-500); --gs-buy-hover: var(--gs-orange-600); --gs-buy-active: var(--gs-orange-700); /* Фокус — обязателен для доступности */ --gs-focus-ring: 0 0 0 3px rgba(0, 131, 255, 0.35); --gs-focus-color: var(--gs-blue-500); /* ========================================================================== 3. ТИПОГРАФИКА Шрифты локальные (css/fonts.css): Involve — основной, Jost — заголовки, Inter — метки/КАПС, SF Pro — цифры и цены (tabular-nums). ========================================================================== */ --gs-font-sans: "Involve", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --gs-font-display: "Jost", "Involve", sans-serif; --gs-font-ui: "Inter", "Involve", sans-serif; --gs-font-mono: "SF Pro", ui-monospace, "Consolas", monospace; /* Кегли: значения взяты из реального использования в теме */ --gs-text-2xs: 11px; --gs-text-xs: 12px; --gs-text-sm: 13px; --gs-text-md: 14px; --gs-text-base:15px; --gs-text-lg: 16px; --gs-text-xl: 17px; --gs-text-2xl: 19px; --gs-text-3xl: 22px; --gs-text-4xl: 25px; /* Адаптивные — для заголовков секций и hero */ --gs-display-sm: clamp(20px, 1.2rem + 0.7vw, 25px); --gs-display-md: clamp(24px, 1.4rem + 1.2vw, 34px); --gs-display-lg: clamp(28px, 1.6rem + 2vw, 44px); --gs-weight-regular: 400; --gs-weight-medium: 500; --gs-weight-semibold: 600; --gs-weight-bold: 700; --gs-leading-tight: 1.15; --gs-leading-snug: 1.3; --gs-leading-normal: 1.5; --gs-leading-relaxed:1.65; --gs-tracking-tight: -0.02em; --gs-tracking-normal: 0; --gs-tracking-wide: 0.06em; --gs-tracking-caps: 0.14em; /* ========================================================================== 4. ГЛУБИНА Каждый уровень = контактная тень + рассеянная. Тон сине-графитовый rgba(17,29,46,…), а не чистый чёрный: на белом фоне выглядит чище. ========================================================================== */ --gs-shadow-none: none; --gs-shadow-xs: 0 1px 2px rgba(17, 29, 46, 0.05); --gs-shadow-sm: 0 1px 2px rgba(17, 29, 46, 0.06), 0 2px 6px rgba(17, 29, 46, 0.05); --gs-shadow-md: 0 2px 4px rgba(17, 29, 46, 0.06), 0 8px 20px rgba(17, 29, 46, 0.07); --gs-shadow-lg: 0 4px 8px rgba(17, 29, 46, 0.07), 0 18px 40px rgba(17, 29, 46, 0.09); --gs-shadow-xl: 0 8px 16px rgba(17, 29, 46, 0.08), 0 32px 64px rgba(17, 29, 46, 0.12); --gs-shadow-inset: inset 0 1px 2px rgba(17, 29, 46, 0.07); /* Цветные — только под CTA */ --gs-shadow-action: 0 6px 16px rgba(0, 131, 255, 0.22); --gs-shadow-buy: 0 6px 16px rgba(255, 102, 0, 0.24); /* ========================================================================== 5. РАДИУСЫ (5 / 11 / 100px — самые частые в теме) ========================================================================== */ --gs-radius-xs: 4px; --gs-radius-sm: 6px; --gs-radius-md: 11px; /* исторический радиус карточек темы */ --gs-radius-lg: 16px; --gs-radius-xl: 20px; --gs-radius-2xl: 28px; --gs-radius-pill: 999px; --gs-radius-circle: 50%; /* ========================================================================== 6. ОТСТУПЫ (шаг 4px) ========================================================================== */ --gs-space-0: 0; --gs-space-1: 4px; --gs-space-2: 8px; --gs-space-3: 12px; --gs-space-4: 16px; --gs-space-5: 20px; --gs-space-6: 24px; --gs-space-8: 32px; --gs-space-10: 40px; --gs-space-12: 48px; --gs-space-16: 64px; --gs-space-20: 80px; /* Layout */ --gs-container-max: 1200px; --gs-container-pad: 20px; --gs-section-y: clamp(40px, 5vw, 68px); --gs-grid-gap: clamp(12px, 1.6vw, 20px); /* ========================================================================== 7. АНИМАЦИЯ ========================================================================== */ --gs-duration-instant: 90ms; --gs-duration-fast: 140ms; --gs-duration-base: 220ms; --gs-duration-slow: 320ms; --gs-duration-slower: 480ms; --gs-ease: cubic-bezier(0.4, 0, 0.2, 1); --gs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gs-ease-in-out: cubic-bezier(0.65, 0.02, 0.22, 1); --gs-ease-spring: cubic-bezier(0.34, 1.42, 0.48, 1); /* ========================================================================== 8. Z-INDEX — вся раскладка слоёв в одном месте ========================================================================== */ --gs-z-base: 1; --gs-z-dropdown: 100; --gs-z-sticky: 200; --gs-z-overlay: 300; --gs-z-modal: 400; --gs-z-toast: 500; /* ========================================================================== 9. АЛИАСЫ ОБРАТНОЙ СОВМЕСТИМОСТИ Старые имена переменных из style.css. НЕ УДАЛЯТЬ: от них зависит весь существующий код темы. Значения теперь приходят из шкал выше, поэтому цвет меняется в одном месте. ========================================================================== */ --primary-dark: var(--gs-neutral-800); --primary-blue: var(--gs-blue-500); --primary-orange: var(--gs-orange-500); --primary-gray: #797979; --card-gray: #eef5fca6; --text-gray-light: var(--gs-neutral-25); --text-gray: var(--gs-neutral-500); --stroke-light: var(--gs-neutral-200); --stroke-dark: var(--gs-neutral-300); --secondary-yellow: var(--gs-warning-500); --secondary-red: var(--gs-danger-500); --secondary-green: var(--gs-success-500); --bg-blue-active: var(--gs-blue-600); }