/* Токены «Лексикона» — единственное место, где живут цвета, размеры и ритм. Ни один экран не пишет цвет числом. Оформление — стеклянное: полупрозрачные слои с размытием подложки, тонкая светлая кромка и мягкая тень. Работает это только при одном условии — под стеклом должно быть что размывать. Поэтому фон страницы не плоский, а с цветными пятнами: без них размытие даёт ровную серую плёнку, и весь приём превращается в лишнюю нагрузку на видеокарту. Тема следует за системой; переключатель на её перекрывает. */ :root { color-scheme: light dark; /* --- подложка --- Три пятна и базовый цвет. Пятна намеренно крупные и размытые: стекло должно ловить плавный переход цвета, а не узнаваемую картинку. */ --bg-base: #070b18; --bg-blob-1: #2b4bff; --bg-blob-2: #6b2fd8; --bg-blob-3: #0f8f92; /* Пятна приглушены до трети: на полной яркости они спорили с содержимым — экран читался как обои, а не как приложение. Стеклу для работы нужен перепад цвета под ним, а не сам цвет. */ --bg-blob-alpha: 0.34; /* --- стекло --- Заливка, кромка и блик. Кромка светлее сверху и темнее снизу — так край читается как физическая фаска, а не как обводка. */ --glass-fill: rgba(255, 255, 255, 0.07); --glass-fill-strong: rgba(255, 255, 255, 0.12); --glass-fill-sunken: rgba(8, 12, 26, 0.34); --glass-edge: rgba(255, 255, 255, 0.16); --glass-edge-strong: rgba(255, 255, 255, 0.28); --glass-sheen: linear-gradient( 160deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0) 62% ); --glass-blur: 26px; --glass-blur-soft: 14px; /* Насыщенность поднимается вместе с размытием: без неё цвет под стеклом сереет, и слой выглядит грязным, а не прозрачным. */ --glass-saturate: 165%; /* --- текст --- */ --text: #eef1fb; --text-muted: #a3adc9; --text-faint: #6f7a99; --text-on-accent: #ffffff; /* --- смысловые цвета --- */ --accent: #6c8cff; --accent-strong: #8aa3ff; --accent-soft: rgba(108, 140, 255, 0.18); --positive: #3ddc97; --positive-soft: rgba(61, 220, 151, 0.16); --negative: #ff6b81; --negative-soft: rgba(255, 107, 129, 0.16); --warning: #ffc14d; --warning-soft: rgba(255, 193, 77, 0.16); /* Ступени владения словом: от «не начата» к «выучено». Один ряд цветов на всё приложение — и в полосе набора, и в точке у карточки, и в легенде. */ --level-0: rgba(255, 255, 255, 0.16); --level-low: #ff8f6b; --level-mid: #ffc14d; --level-high: #3ddc97; /* --- типографика --- */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --size-hero: clamp(30px, 6vw, 44px); --size-title: clamp(22px, 4vw, 28px); --size-section: 17px; --size-body: 15px; --size-caption: 13px; --size-micro: 11px; /* Слово на карточке крупное: его читают с расстояния вытянутой руки, а не с экрана в двадцати сантиметрах. */ --size-term: clamp(32px, 8vw, 52px); /* --- форма --- */ --radius-lg: 26px; --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --tap: 46px; /* --- ритм --- */ --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-lg: 24px; --gap-xl: 36px; --page-pad: 18px; --page-max: 900px; --page-narrow: 560px; /* --- глубина --- */ --shadow-raised: 0 18px 40px rgba(3, 6, 18, 0.45); --shadow-float: 0 28px 70px rgba(3, 6, 18, 0.55); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.14); /* --- движение --- Кривая с лёгким перелётом: у стекла есть масса, и появляться мгновенно оно не должно. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); --fast: 160ms; --slow: 320ms; /* --- безопасные зоны --- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --tabbar: 66px; } /* Светлая тема. Стекло в ней не «белее», а плотнее: на светлом фоне прозрачный слой почти не читается, и кромку приходится делать тёмной — иначе край исчезает вовсе. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; /* Пятна подложки здесь бледнее, чем в тёмной теме, и это не осторожность. На тёмном фоне цвет проступает сквозь стекло приглушённым; на светлом — во всю силу, и белые панели окрашиваются в сиреневый: слои перестают читаться как слои и сливаются с фоном в одно пятно. Само стекло, наоборот, плотнее: прозрачный слой на светлом фоне почти не виден, а текст на нём теряет контраст. */ --bg-base: #f1f3fa; --bg-blob-1: #9db4ff; --bg-blob-2: #d3b8ff; --bg-blob-3: #a6ead9; --bg-blob-alpha: 0.3; --glass-fill: rgba(255, 255, 255, 0.74); --glass-fill-strong: rgba(255, 255, 255, 0.88); --glass-fill-sunken: rgba(255, 255, 255, 0.52); --glass-edge: rgba(16, 24, 48, 0.14); --glass-edge-strong: rgba(16, 24, 48, 0.22); --glass-sheen: linear-gradient( 160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 60% ); --text: #101833; --text-muted: #56618a; --text-faint: #8892b4; --accent: #3a5bef; --accent-strong: #2542cf; --accent-soft: rgba(58, 91, 239, 0.12); --positive: #0f9d68; --positive-soft: rgba(15, 157, 104, 0.14); --negative: #d93a55; --negative-soft: rgba(217, 58, 85, 0.12); --warning: #b3760a; --warning-soft: rgba(179, 118, 10, 0.14); --level-0: rgba(16, 24, 48, 0.14); --level-low: #e4703f; --level-mid: #cf9200; --level-high: #0f9d68; --shadow-raised: 0 18px 40px rgba(38, 52, 96, 0.16); --shadow-float: 0 28px 70px rgba(38, 52, 96, 0.2); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(16, 24, 48, 0.06); } } /* Те же значения для явно выбранной светлой темы. Повторение неизбежно: медиа-запрос и атрибут — независимые условия, и объединить их в один селектор нельзя. Цветные темы перечислены здесь же: все они светлые, и общая основа у них одна. Каждая переопределяет ниже только своё — пятна подложки, цвет действия и, если есть, узор. Так тема — это десяток строк, а не копия всего файла, и правка общего поведения не забывается в четырёх местах. */ :root[data-theme="light"], :root[data-theme="sakura"], :root[data-theme="lavender"], :root[data-theme="mint"], :root[data-theme="peach"] { color-scheme: light; --bg-base: #f1f3fa; --bg-blob-1: #9db4ff; --bg-blob-2: #d3b8ff; --bg-blob-3: #a6ead9; --bg-blob-alpha: 0.3; --glass-fill: rgba(255, 255, 255, 0.74); --glass-fill-strong: rgba(255, 255, 255, 0.88); --glass-fill-sunken: rgba(255, 255, 255, 0.52); --glass-edge: rgba(16, 24, 48, 0.14); --glass-edge-strong: rgba(16, 24, 48, 0.22); --glass-sheen: linear-gradient( 160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 60% ); --text: #101833; --text-muted: #56618a; --text-faint: #8892b4; --accent: #3a5bef; --accent-strong: #2542cf; --accent-soft: rgba(58, 91, 239, 0.12); --positive: #0f9d68; --positive-soft: rgba(15, 157, 104, 0.14); --negative: #d93a55; --negative-soft: rgba(217, 58, 85, 0.12); --warning: #b3760a; --warning-soft: rgba(179, 118, 10, 0.14); --level-0: rgba(16, 24, 48, 0.14); --level-low: #e4703f; --level-mid: #cf9200; --level-high: #0f9d68; --shadow-raised: 0 18px 40px rgba(38, 52, 96, 0.16); --shadow-float: 0 28px 70px rgba(38, 52, 96, 0.2); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(16, 24, 48, 0.06); } :root[data-theme="dark"] { color-scheme: dark; } /* ------------------------------------------------------------------ темы Четыре светлые темы сверх системной. Все воздушные: пятна подложки бледные, стекло почти белое, тени мягкие. Насыщенный цвет здесь только у действия — кнопки и ссылки, — потому что на пастельном фоне он единственный способ показать, куда нажимать. Пятна крупные и размытые, как и в остальных темах: под стеклом должен быть плавный переход цвета. Мелкий узор туда не годится — размытие превратит его в грязь. Поэтому лепестки в «Сакуре» живут отдельным слоем поверх пятен и держатся еле заметными: узор, который замечаешь, через неделю начинает раздражать, а через месяц его выключают вместе с темой. */ /* Сакура: бледно-розовое с сиреневым и лепестками. */ :root[data-theme="sakura"] { --bg-base: #fff6fa; --bg-blob-1: #ffc3dc; --bg-blob-2: #e6c7ff; --bg-blob-3: #ffe3cf; --bg-blob-alpha: 0.42; --accent: #e04d95; --accent-strong: #bf2f78; --accent-soft: rgba(224, 77, 149, 0.14); --text: #3d2233; --text-muted: #7d5c72; --text-faint: #a98da1; --glass-edge: rgba(120, 60, 95, 0.14); --glass-edge-strong: rgba(120, 60, 95, 0.22); --shadow-raised: 0 18px 40px rgba(150, 80, 120, 0.14); --shadow-float: 0 28px 70px rgba(150, 80, 120, 0.18); /* Лепестки. Восемь штук на плитку 260×260, повёрнуты по-разному — так глаз не находит повторения, хотя плитка одна. */ --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23f08fbc' opacity='0.5'%3E%3Cellipse cx='34' cy='42' rx='9' ry='4.5' transform='rotate(-24 34 42)'/%3E%3Cellipse cx='150' cy='28' rx='8' ry='4' transform='rotate(40 150 28)'/%3E%3Cellipse cx='214' cy='96' rx='9.5' ry='4.5' transform='rotate(-8 214 96)'/%3E%3Cellipse cx='96' cy='120' rx='7.5' ry='3.5' transform='rotate(62 96 120)'/%3E%3Cellipse cx='28' cy='178' rx='9' ry='4' transform='rotate(14 28 178)'/%3E%3Cellipse cx='188' cy='196' rx='8' ry='4' transform='rotate(-46 188 196)'/%3E%3Cellipse cx='120' cy='232' rx='9' ry='4.5' transform='rotate(28 120 232)'/%3E%3Cellipse cx='248' cy='166' rx='7' ry='3.5' transform='rotate(-62 248 166)'/%3E%3C/g%3E%3C/svg%3E"); } /* Лаванда: сиреневое с васильковым. */ :root[data-theme="lavender"] { --bg-base: #f7f5ff; --bg-blob-1: #cec4ff; --bg-blob-2: #e0c9ff; --bg-blob-3: #c3dcff; --bg-blob-alpha: 0.4; --accent: #6a52e0; --accent-strong: #4f38c4; --accent-soft: rgba(106, 82, 224, 0.13); --text: #241d43; --text-muted: #5f5686; --text-faint: #948cb5; --glass-edge: rgba(60, 48, 110, 0.13); --glass-edge-strong: rgba(60, 48, 110, 0.21); --shadow-raised: 0 18px 40px rgba(90, 75, 160, 0.14); --shadow-float: 0 28px 70px rgba(90, 75, 160, 0.18); } /* Мята: холодное зелёное с голубым. Самая спокойная из четырёх. */ :root[data-theme="mint"] { --bg-base: #f2fbf7; --bg-blob-1: #a9ecd5; --bg-blob-2: #bfe6ff; --bg-blob-3: #dff6c9; --bg-blob-alpha: 0.4; --accent: #0e9e79; --accent-strong: #08805f; --accent-soft: rgba(14, 158, 121, 0.13); --text: #143028; --text-muted: #4a7166; --text-faint: #85a49a; --glass-edge: rgba(20, 70, 58, 0.13); --glass-edge-strong: rgba(20, 70, 58, 0.2); --shadow-raised: 0 18px 40px rgba(40, 110, 92, 0.13); --shadow-float: 0 28px 70px rgba(40, 110, 92, 0.17); } /* Персик: тёплое, самое «дневное». */ :root[data-theme="peach"] { --bg-base: #fff8f2; --bg-blob-1: #ffd3b3; --bg-blob-2: #ffc9d4; --bg-blob-3: #ffe9b8; --bg-blob-alpha: 0.44; --accent: #e0603a; --accent-strong: #bf4522; --accent-soft: rgba(224, 96, 58, 0.13); --text: #40251a; --text-muted: #7d5a49; --text-faint: #ab8a79; --glass-edge: rgba(120, 70, 45, 0.13); --glass-edge-strong: rgba(120, 70, 45, 0.21); --shadow-raised: 0 18px 40px rgba(160, 100, 70, 0.14); --shadow-float: 0 28px 70px rgba(160, 100, 70, 0.18); } /* Прозрачность — украшение, а не содержание. Кому она мешает (а мешает она по-настоящему: при некоторых нарушениях зрения текст на размытом фоне читается заметно хуже), тот получает плотные поверхности. */ @media (prefers-reduced-transparency: reduce) { :root { --glass-fill: #131a30; --glass-fill-strong: #1a2340; --glass-fill-sunken: #0d1428; --glass-blur: 0px; --glass-blur-soft: 0px; --bg-blob-alpha: 0.18; } :root[data-theme="light"] { --glass-fill: #ffffff; --glass-fill-strong: #ffffff; --glass-fill-sunken: #f2f4fb; } } @media (prefers-reduced-motion: reduce) { :root { --fast: 1ms; --slow: 1ms; } }