/* ========================================================================== Дизайн-токены Carsly Монохромная премиум-палитра, единая шкала отступов, скруглений и анимаций. Тема переключается через [data-theme] на . ========================================================================== */ :root { /* --- Палитра (нейтральная шкала) --- */ --c-black: #000000; --c-white: #ffffff; --grey-05: #0d0d0d; --grey-10: #1a1a1a; --grey-15: #262626; --grey-20: #333333; --grey-25: #424242; --grey-30: #4f4f4f; --grey-40: #696969; --grey-45: #767676; --grey-55: #919191; --grey-60: #9f9f9f; --grey-70: #bbbbbb; --grey-80: #dbdbdb; --grey-85: #e8e8e8; --grey-90: #f4f4f4; --grey-95: #f8f8f8; /* --- Скругления --- */ --radius-s: 2px; --radius-m: 4px; --radius-l: 8px; --radius-full: 50%; /* --- Шкала отступов --- */ --space-3xs: 0.25rem; --space-xxs: 0.5rem; --space-xs: 1rem; --space-s: 1.5rem; --space-m: 2rem; --space-l: 3rem; --space-xl: 4rem; --space-xxl: 5rem; /* --- Сетка / контейнер --- */ --grid-width: min(90vw, 1680px); --grid-gutter: 1rem; /* --- Кривые и длительности анимаций --- */ --ease-move: cubic-bezier(0.3, 0, 0, 1); --ease-open: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-fade: cubic-bezier(0, 0, 0.3, 1); --dur-fast: 0.16s; --dur-base: 0.28s; --dur-slow: 0.44s; /* --- Тени --- */ --shadow-s: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1); --shadow-m: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1); /* --- Шрифты --- */ --font-text: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-title: "Playfair Display", Georgia, "Times New Roman", serif; /* --- Навигация --- */ --nav-height: 64px; --nav-z: 950; /* --- Акцент (фокус поля поиска и т.п.) --- */ --accent: #2f6fed; --accent-soft: rgba(47, 111, 237, 0.18); } /* --- Светлая тема (основная) --- */ :root, :root[data-theme="light"] { --bg: var(--c-white); --bg-elevated: var(--c-white); --bg-sunken: var(--grey-95); --surface: var(--grey-90); --text: var(--c-black); --text-muted: var(--grey-40); --text-subtle: var(--grey-55); --border: var(--grey-85); --border-strong: var(--grey-70); --link-hover: var(--grey-45); --nav-bg: rgba(255, 255, 255, 0.8); --nav-border: var(--grey-85); --overlay: rgba(0, 0, 0, 0.5); /* Логотип: приводим к чистому чёрному */ --logo-filter: brightness(0) saturate(100%); } /* --- Тёмная тема (инверсия) --- */ :root[data-theme="dark"] { --bg: var(--c-black); --bg-elevated: var(--grey-10); --bg-sunken: var(--grey-05); --surface: var(--grey-15); --text: var(--c-white); --text-muted: var(--grey-60); --text-subtle: var(--grey-55); --border: var(--grey-20); --border-strong: var(--grey-30); --link-hover: var(--grey-70); --nav-bg: rgba(0, 0, 0, 0.75); --nav-border: var(--grey-20); --overlay: rgba(0, 0, 0, 0.6); /* Логотип: приводим к чистому белому */ --logo-filter: brightness(0) saturate(100%) invert(1); }