/* Callen — единственный файл токенов на лендинг и приложение. Канонический экземпляр лежит здесь, в web/; app/tokens.css — его точная копия, потому что лендинг и приложение выкладываются в разные каталоги на сервере (/var/www/callen и /var/www/app) и общего пути у них нет. Правим всегда этот файл, копию обновляем командой: cp web/tokens.css app/tokens.css Здесь только значения: цвета, шрифты, размеры, отступы, радиусы, тени и длительности. Ни одного правила для конкретного элемента — иначе файл перестанет быть общим и разъедется вслед за экранами. Две темы. Тёмная — основная и лежит в :root; светлая включается системной настройкой и переключателем в профиле (атрибут data-theme на ). Класс .theme-dark возвращает тёмную палитру внутри светлой темы: им помечен экран звонка, который тёмный всегда. Работает это не на специфичности, а на наследовании переменных: у элемента с .theme-dark свои значения, и весь его поддерево берёт их, что бы ни стояло на :root. */ :root, .theme-dark { color-scheme: dark; /* поверхности */ --bg: #14151A; --surface: #1B1D24; --surface-2: #22252E; --line: #2B2F3A; --line-soft: #23262F; --scrim: rgba(9,10,13,.72); --glass: rgba(27,29,36,.72); /* текст */ --ink: #F5F0E8; --muted: #9AA0AC; --dim: #71767F; /* акцент — один и тот же оранжевый в обеих темах */ --accent: #F2994A; --accent-text: #FFB871; --accent-soft: rgba(242,153,74,.13); --accent-line: rgba(242,153,74,.42); --on-accent: #1A1006; --grad-accent: linear-gradient(135deg,#FFB166 0%,#F2994A 55%,#E0813A 100%); /* состояния */ --ok: #4CC38A; --ok-text: #6FD3A3; --ok-soft: rgba(76,195,138,.12); --ok-line: rgba(76,195,138,.38); --danger: #D9483B; --danger-text: #F0A79F; --danger-soft: rgba(217,72,59,.12); --danger-line: rgba(217,72,59,.42); /* тени: карточка лежит, поднятая светится акцентом */ --sh-card: 0 1px 1px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9); --sh-up: 0 2px 2px rgba(0,0,0,.5), 0 22px 48px -24px rgba(0,0,0,.95); --sh-lift: 0 0 0 1px var(--accent-line), 0 18px 40px -20px rgba(242,153,74,.32), 0 22px 46px -28px rgba(0,0,0,.9); --sh-glow: 0 10px 26px -12px rgba(242,153,74,.75); } /* Светлая тема: тёплый кремовый, не белый. Тот же оранжевый, но для текста берётся его тёмный извод — #F2994A на креме не читается. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F7F1E6; --surface: #FFFBF3; --surface-2: #FDF5E8; --line: #E3D8C6; --line-soft: #EEE5D6; --scrim: rgba(32,25,16,.55); --glass: rgba(255,251,243,.78); --ink: #211E19; --muted: #6B6455; --dim: #8E8676; --accent: #F2994A; --accent-text: #B0600F; --accent-soft: rgba(242,153,74,.16); --accent-line: rgba(197,113,32,.45); --on-accent: #21160A; --ok: #2E9E6B; --ok-text: #1E7A50; --ok-soft: rgba(46,158,107,.13); --ok-line: rgba(46,158,107,.40); --danger: #C63B2F; --danger-text: #A02A20; --danger-soft: rgba(198,59,47,.10); --danger-line: rgba(198,59,47,.38); --sh-card: 0 1px 1px rgba(84,64,36,.06), 0 12px 28px -20px rgba(84,64,36,.45); --sh-up: 0 2px 3px rgba(84,64,36,.08), 0 20px 42px -22px rgba(84,64,36,.5); --sh-lift: 0 0 0 1px var(--accent-line), 0 16px 34px -20px rgba(197,113,32,.42), 0 18px 38px -26px rgba(84,64,36,.5); --sh-glow: 0 10px 24px -12px rgba(197,113,32,.5); } } /* Переключатель в профиле. Повтор значений, а не @import: файл должен оставаться одним и читаться сверху вниз без переходов по ссылкам. */ :root[data-theme="light"] { color-scheme: light; --bg: #F7F1E6; --surface: #FFFBF3; --surface-2: #FDF5E8; --line: #E3D8C6; --line-soft: #EEE5D6; --scrim: rgba(32,25,16,.55); --glass: rgba(255,251,243,.78); --ink: #211E19; --muted: #6B6455; --dim: #8E8676; --accent: #F2994A; --accent-text: #B0600F; --accent-soft: rgba(242,153,74,.16); --accent-line: rgba(197,113,32,.45); --on-accent: #21160A; --ok: #2E9E6B; --ok-text: #1E7A50; --ok-soft: rgba(46,158,107,.13); --ok-line: rgba(46,158,107,.40); --danger: #C63B2F; --danger-text: #A02A20; --danger-soft: rgba(198,59,47,.10); --danger-line: rgba(198,59,47,.38); --sh-card: 0 1px 1px rgba(84,64,36,.06), 0 12px 28px -20px rgba(84,64,36,.45); --sh-up: 0 2px 3px rgba(84,64,36,.08), 0 20px 42px -22px rgba(84,64,36,.5); --sh-lift: 0 0 0 1px var(--accent-line), 0 16px 34px -20px rgba(197,113,32,.42), 0 18px 38px -26px rgba(84,64,36,.5); --sh-glow: 0 10px 24px -12px rgba(197,113,32,.5); } /* Тёмный островок внутри светлой страницы должен ещё и перекрасить текст: цвет наследуется от body и сам собой за переменными не пойдёт. */ .theme-dark{color:var(--ink)} /* Общее для обеих тем: то, что от цвета не зависит. */ :root { /* шрифты: Onest — заголовки, Manrope — текст. Третьего нет намеренно */ --font-display: 'Onest', system-ui, sans-serif; --font-text: 'Manrope', system-ui, sans-serif; /* размеры текста */ --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: clamp(28px, 4.2vw, 38px); --fs-display: clamp(38px, 7.5vw, 70px); /* отступы */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; /* радиусы */ --rad-sm: 10px; --rad-md: 14px; --rad-lg: 20px; --rad-xl: 28px; --rad-pill: 999px; /* движение: 200–250 мс на переход экрана, 40 мс задержки между карточками */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 250ms; --ease: cubic-bezier(.2,.7,.3,1); --ease-out: cubic-bezier(.16,1,.3,1); --stagger: 40ms; /* раскладка */ --tap: 48px; /* меньше этого пальцем не попасть */ --content: 960px; /* колонка контента на десктопе */ --rail: 96px; /* узкая панель навигации слева */ --tabs: 64px; /* нижняя навигация на телефоне */ }