/* ========================================================================== Токены дизайна. Единственное место, где живут цвета, размеры и тайминги. Всё остальное ссылается сюда через var() — поэтому тема меняется одним переключением атрибута на . ========================================================================== */ :root { /* --- Шрифты ----------------------------------------------------------- */ --font-head: "Onest", "Manrope", "Segoe UI", system-ui, sans-serif; --font-text: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif; --font-code: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, monospace; /* --- Шкала пробелов --------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* --- Радиусы ---------------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px; /* --- Тайминги --------------------------------------------------------- */ --fast: .15s; --base: .3s; --slow: .6s; --ease: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); /* --- Раскладка -------------------------------------------------------- */ --measure: 68ch; --container: 1220px; --header-h: 64px; /* --- Семантика языков (одинакова в обеих темах) ----------------------- */ --html-hue: 24; --css-hue: 214; /* --- Акцент ----------------------------------------------------------- */ --accent-1: #7c5cff; --accent-2: #b06cff; --accent-grad: linear-gradient(115deg, var(--accent-1), var(--accent-2)); } /* --- Тёмная тема (по умолчанию) ----------------------------------------- */ :root, [data-theme="dark"] { --bg: #0b0e17; --bg-deep: #070911; --surface-1: #10141f; --surface-2: #151a26; --surface-3: #1c2231; --border: rgb(255 255 255 / .08); --border-strong: rgb(255 255 255 / .16); --text: #e8eaf2; --text-soft: #a7adc2; --text-mute: #737b93; --accent: #8b6cff; --accent-soft: rgb(139 108 255 / .16); --accent-text: #b9a5ff; --html: hsl(var(--html-hue) 92% 62%); --html-soft: hsl(var(--html-hue) 92% 62% / .14); --css: hsl(var(--css-hue) 92% 66%); --css-soft: hsl(var(--css-hue) 92% 66% / .14); --ok: #4bd1a0; --ok-soft: rgb(75 209 160 / .13); --warn: #e5b567; --warn-soft: rgb(229 181 103 / .13); --bad: #f2777a; --bad-soft: rgb(242 119 122 / .13); --info: #6cc6ff; --info-soft: rgb(108 198 255 / .13); --shadow-1: 0 1px 2px rgb(3 5 12 / .5); --shadow-2: 0 10px 30px -12px rgb(3 5 12 / .75), 0 2px 8px rgb(3 5 12 / .4); --shadow-3: 0 30px 70px -28px rgb(52 32 120 / .65), 0 8px 24px rgb(3 5 12 / .5); --grid-line: rgb(255 255 255 / .045); --glow: rgb(139 108 255 / .35); /* Подсветка кода */ --tok-tag: #7fd4ff; --tok-attr: #d7a3ff; --tok-string: #a5e6a0; --tok-punct: #6f7896; --tok-comment: #5d6480; --tok-doctype: #8b93b0; --tok-entity: #ffcb6b; --tok-prop: #7fd4ff; --tok-val: #ffb682; --tok-num: #f9a8c8; --tok-color: #f9a8c8; --tok-at: #ff9db0; --tok-pseudo: #ffcb6b; --tok-sel-class: #d7a3ff; --tok-var: #a5e6a0; } /* --- Светлая тема -------------------------------------------------------- */ [data-theme="light"] { --bg: #f6f7fb; --bg-deep: #eceef6; --surface-1: #ffffff; --surface-2: #f2f3f9; --surface-3: #e8eaf3; --border: rgb(16 20 40 / .1); --border-strong: rgb(16 20 40 / .2); --text: #131627; --text-soft: #4d5468; --text-mute: #737b93; --accent: #6544e0; --accent-soft: rgb(101 68 224 / .1); --accent-text: #5334cf; --html: hsl(var(--html-hue) 82% 44%); --html-soft: hsl(var(--html-hue) 82% 44% / .1); --css: hsl(var(--css-hue) 82% 46%); --css-soft: hsl(var(--css-hue) 82% 46% / .1); --ok: #0f8f6a; --ok-soft: rgb(15 143 106 / .1); --warn: #9a6a13; --warn-soft: rgb(154 106 19 / .1); --bad: #c8394a; --bad-soft: rgb(200 57 74 / .1); --info: #1e6fb8; --info-soft: rgb(30 111 184 / .1); --shadow-1: 0 1px 2px rgb(20 24 48 / .07); --shadow-2: 0 10px 26px -14px rgb(20 24 48 / .28), 0 2px 6px rgb(20 24 48 / .06); --shadow-3: 0 28px 60px -30px rgb(70 48 160 / .35), 0 8px 20px rgb(20 24 48 / .08); --grid-line: rgb(16 20 40 / .05); --glow: rgb(101 68 224 / .22); --tok-tag: #0a6fbe; --tok-attr: #7a3fc4; --tok-string: #1c7a4a; --tok-punct: #6b7288; --tok-comment: #8a90a4; --tok-doctype: #6b7288; --tok-entity: #9a6a13; --tok-prop: #0a6fbe; --tok-val: #b0521a; --tok-num: #b3316a; --tok-color: #b3316a; --tok-at: #c03050; --tok-pseudo: #9a6a13; --tok-sel-class: #7a3fc4; --tok-var: #1c7a4a; }