/* ============================================================================ СУПРЕМУМ · sup-tokens-paper.css — токены тональностей «Тушь и бумага» ============================================================================ СОБРАН АВТОМАТИЧЕСКИ: python tools\design_system\palette.py write-paper Руками не правится — правь PAPER_RAW / PAPER_FIX в palette.py: генератор проверит условия приёмки (контраст на композитных стеклянных подложках, различимость при дальтонизме) и перезапишет этот файл. Источник значений — холст Claude Design «СУПРЕМУМ Темы» (утверждён 2026-08-20). Тональность выбирается атрибутом data-tone на : (нет) «Тушь и бумага» — 5–6 класс, витрина, кабинет data-tone="graphite" «Графит» — 7–9 класс data-tone="news" «Газета» — 10–11 класс и ЕГЭ Светлая/тёмная — data-theme (ключ localStorage geo-theme, менять нельзя). ============================================================================ */ /* ── ТИПОГРАФИКА · общая для тональностей ───────────────── База 20px (на ≤720px база опускается до 18px в paper-base.css — иначе мера строки на телефоне падает ниже 30 знаков). */ :root { --font-display: 'Literata', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace; --font-math: 'KaTeX_Math', 'CMU Serif', 'Times New Roman', serif; --fs-root: 20px; --fs-3xl: clamp(1.6rem, 5.2vw, 2.5rem); --fs-2xl: clamp(1.3rem, 3.6vw, 1.75rem); --fs-xl: clamp(1.15rem, 2.4vw, 1.35rem); --fs-lg: 1.15rem; --fs-md: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.775rem; --lh-3xl: 1.12; --lh-2xl: 1.22; --lh-xl: 1.32; --lh-lg: 1.45; --lh-md: 1.55; --lh-sm: 1.5; --lh-xs: 1.45; /* Веса ограничены файлами шрифтов: Plex Sans 400…600 (700 даст фальшивый жирный), Plex Mono только 500, Literata 200…900. */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 600; --fw-display: 700; --fw-mono: 500; } /* ── РАЗМЕРЫ · шкала 4px ── */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --measure: 34.9rem; /* 66 знаков; НЕ в ch — ширина ch зависит от шрифта */ --page-max: 1180px; --page-pad: clamp(var(--sp-4), 4vw, var(--sp-12)); --tap: 44px; --radius-pill: 999px; } /* ── ДВИЖЕНИЕ · интерфейс, а не презентация ── */ :root { --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 420ms; --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-in-out: cubic-bezier(.6, 0, .3, 1); --stagger: 60ms; --ring-width: 2px; --ring-offset: 2px; } /* ── СЛОИ ── */ :root { --z-header: 50; --z-sticky: 40; --z-overlay: 80; --z-modal: 90; --z-toast: 100; } /* ── ФАКТУРА · миллиметровка ── */ :root { --grid-line: color-mix(in oklab, var(--n-5) 34%, transparent); --grid-step: 24px; --grid-step-fine: 6px; } /* Маркер живости файла для линтера сборки. */ :root { --sup-paper: 1; } /* ── Тушь и бумага · светлая ── */ html:root { color-scheme: light; --n-0: #fffefb; --n-2: #eae7e0; --n-3: #ded9d0; --n-5: #c0ad98; --bg: #f3f1ec; --bg-sunken: #e7e3da; --surface: rgba(255,254,251,.90); --surface-2: rgba(255,254,251,.72); --sunken: rgba(35,33,29,.05); --text: #23211d; --text-strong: #14120f; --text-soft: #67645e; --text-faint: #858179; --border: rgba(35,33,29,.15); --border-strong: rgba(35,33,29,.30); --rule: rgba(35,33,29,.22); --accent: #2b2823; --accent-hover: #14120f; --accent-fg: #fbfaf7; --accent-soft: rgba(35,33,29,.07); --accent-line: rgba(35,33,29,.28); --pen: #a04a3c; --ok: #3f6b4f; --err: #9c4038; --warn: #8a6a22; --info: #3e5574; --ok-soft: rgba(63,107,79,.11); --err-soft: rgba(156,64,56,.10); --warn-soft: rgba(138,106,34,.12); --info-soft: rgba(62,85,116,.10); --ok-fg: #2c4d38; --err-fg: #722d27; --warn-fg: #5f4915; --info-fg: #2a4052; --fig-1: #23211d; --fig-2: #3c5a72; --fig-3: #3f6b4f; --fig-4: #8a6a22; --fig-5: #6f587b; --fig-6: #b55f48; --ring: #2b2823; --glass: rgba(255,254,251,.66); --glass-strong: rgba(255,254,251,.90); --glass-border: rgba(255,255,255,.78); --glass-top: rgba(255,255,255,.90); --glass-hover: rgba(255,254,251,.99); --hair: rgba(35,33,29,.12); --sh: rgba(35,33,29,.13); --solid: #fffefb; --bloom: rgba(255,255,255,.85); --shadow-raised: 0 1px 2px rgba(35,33,29,.06); --shadow-float: 0 8px 32px rgba(35,33,29,.13); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(35,33,29,0.20); --fill-2: rgba(60,90,114,0.20); --fill-3: rgba(63,107,79,0.20); --fill-4: rgba(138,106,34,0.20); --fill-5: rgba(111,88,123,0.20); --fill-6: rgba(181,95,72,0.20); } html:root:where([data-theme="light"]) { color-scheme: light; --n-0: #fffefb; --n-2: #eae7e0; --n-3: #ded9d0; --n-5: #c0ad98; --bg: #f3f1ec; --bg-sunken: #e7e3da; --surface: rgba(255,254,251,.90); --surface-2: rgba(255,254,251,.72); --sunken: rgba(35,33,29,.05); --text: #23211d; --text-strong: #14120f; --text-soft: #67645e; --text-faint: #858179; --border: rgba(35,33,29,.15); --border-strong: rgba(35,33,29,.30); --rule: rgba(35,33,29,.22); --accent: #2b2823; --accent-hover: #14120f; --accent-fg: #fbfaf7; --accent-soft: rgba(35,33,29,.07); --accent-line: rgba(35,33,29,.28); --pen: #a04a3c; --ok: #3f6b4f; --err: #9c4038; --warn: #8a6a22; --info: #3e5574; --ok-soft: rgba(63,107,79,.11); --err-soft: rgba(156,64,56,.10); --warn-soft: rgba(138,106,34,.12); --info-soft: rgba(62,85,116,.10); --ok-fg: #2c4d38; --err-fg: #722d27; --warn-fg: #5f4915; --info-fg: #2a4052; --fig-1: #23211d; --fig-2: #3c5a72; --fig-3: #3f6b4f; --fig-4: #8a6a22; --fig-5: #6f587b; --fig-6: #b55f48; --ring: #2b2823; --glass: rgba(255,254,251,.66); --glass-strong: rgba(255,254,251,.90); --glass-border: rgba(255,255,255,.78); --glass-top: rgba(255,255,255,.90); --glass-hover: rgba(255,254,251,.99); --hair: rgba(35,33,29,.12); --sh: rgba(35,33,29,.13); --solid: #fffefb; --bloom: rgba(255,255,255,.85); --shadow-raised: 0 1px 2px rgba(35,33,29,.06); --shadow-float: 0 8px 32px rgba(35,33,29,.13); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(35,33,29,0.20); --fill-2: rgba(60,90,114,0.20); --fill-3: rgba(63,107,79,0.20); --fill-4: rgba(138,106,34,0.20); --fill-5: rgba(111,88,123,0.20); --fill-6: rgba(181,95,72,0.20); } /* ── Тушь и бумага · тёмная (явный выбор) ── */ html:root:where([data-theme="dark"]) { color-scheme: dark; --n-0: #262421; --n-2: #262421; --n-3: #332f2a; --n-5: #5b5349; --bg: #1c1b18; --bg-sunken: #141311; --surface: rgba(38,36,32,.88); --surface-2: rgba(50,47,42,.78); --sunken: rgba(0,0,0,.26); --text: #e8e5de; --text-strong: #fbf9f5; --text-soft: #a6a197; --text-faint: #857f75; --border: rgba(240,236,228,.14); --border-strong: rgba(240,236,228,.26); --rule: rgba(240,236,228,.18); --accent: #e8e5de; --accent-hover: #fbf9f5; --accent-fg: #1c1b18; --accent-soft: rgba(232,229,222,.13); --accent-line: rgba(232,229,222,.30); --pen: #d98b7e; --ok: #7fb894; --err: #e0918a; --warn: #cfb370; --info: #97b1d3; --ok-soft: rgba(127,184,148,.13); --err-soft: rgba(224,145,138,.13); --warn-soft: rgba(207,179,112,.13); --info-soft: rgba(151,177,211,.13); --ok-fg: #b6d9c3; --err-fg: #f0c2bd; --warn-fg: #ecd7ac; --info-fg: #c4d8e6; --fig-1: #e8e5de; --fig-2: #93b3cc; --fig-3: #7fb894; --fig-4: #d4b071; --fig-5: #bb9ac0; --fig-6: #be7a68; --ring: #e8e5de; --glass: rgba(46,44,40,.60); --glass-strong: rgba(38,36,32,.88); --glass-border: rgba(240,236,228,.11); --glass-top: rgba(240,236,228,.09); --glass-hover: rgba(54,51,46,.94); --hair: rgba(251,249,245,.10); --sh: rgba(0,0,0,.40); --solid: #262421; --bloom: rgba(240,236,228,.06); --shadow-raised: none; --shadow-float: 0 10px 34px rgba(0,0,0,.45); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(232,229,222,0.22); --fill-2: rgba(147,179,204,0.22); --fill-3: rgba(127,184,148,0.22); --fill-4: rgba(212,176,113,0.22); --fill-5: rgba(187,154,192,0.22); --fill-6: rgba(190,122,104,0.22); } /* ── Графит · светлая ── */ html:root:where([data-tone="graphite"]) { color-scheme: light; --n-0: #fcfdfe; --n-2: #e6e9eb; --n-3: #d8dcdf; --n-5: #aab2b7; --bg: #eff1f2; --bg-sunken: #e3e6e8; --surface: rgba(252,253,254,.90); --surface-2: rgba(252,253,254,.72); --sunken: rgba(30,35,38,.05); --text: #1e2326; --text-strong: #0f1315; --text-soft: #5e676c; --text-faint: #7c858a; --border: rgba(30,35,38,.15); --border-strong: rgba(30,35,38,.30); --rule: rgba(30,35,38,.22); --accent: #232a2e; --accent-hover: #0f1315; --accent-fg: #fbfcfd; --accent-soft: rgba(30,35,38,.07); --accent-line: rgba(30,35,38,.28); --pen: #3d6478; --ok: #35695a; --err: #96413c; --warn: #7d6524; --info: #3a517a; --ok-soft: rgba(53,105,90,.11); --err-soft: rgba(150,65,60,.10); --warn-soft: rgba(125,101,36,.12); --info-soft: rgba(58,81,122,.10); --ok-fg: #254b41; --err-fg: #6d2f2b; --warn-fg: #584718; --info-fg: #274050; --fig-1: #1e2326; --fig-2: #37556d; --fig-3: #35695a; --fig-4: #7d6524; --fig-5: #685e80; --fig-6: #6c3c4b; --ring: #232a2e; --glass: rgba(252,253,254,.66); --glass-strong: rgba(252,253,254,.90); --glass-border: rgba(255,255,255,.80); --glass-top: rgba(255,255,255,.92); --glass-hover: rgba(252,253,254,.99); --hair: rgba(30,35,38,.12); --sh: rgba(30,35,38,.13); --solid: #fcfdfe; --bloom: rgba(255,255,255,.88); --shadow-raised: 0 1px 2px rgba(30,35,38,.06); --shadow-float: 0 8px 32px rgba(30,35,38,.13); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(30,35,38,0.20); --fill-2: rgba(55,85,109,0.20); --fill-3: rgba(53,105,90,0.20); --fill-4: rgba(125,101,36,0.20); --fill-5: rgba(104,94,128,0.20); --fill-6: rgba(108,60,75,0.20); } html:root:where([data-tone="graphite"][data-theme="light"]) { color-scheme: light; --n-0: #fcfdfe; --n-2: #e6e9eb; --n-3: #d8dcdf; --n-5: #aab2b7; --bg: #eff1f2; --bg-sunken: #e3e6e8; --surface: rgba(252,253,254,.90); --surface-2: rgba(252,253,254,.72); --sunken: rgba(30,35,38,.05); --text: #1e2326; --text-strong: #0f1315; --text-soft: #5e676c; --text-faint: #7c858a; --border: rgba(30,35,38,.15); --border-strong: rgba(30,35,38,.30); --rule: rgba(30,35,38,.22); --accent: #232a2e; --accent-hover: #0f1315; --accent-fg: #fbfcfd; --accent-soft: rgba(30,35,38,.07); --accent-line: rgba(30,35,38,.28); --pen: #3d6478; --ok: #35695a; --err: #96413c; --warn: #7d6524; --info: #3a517a; --ok-soft: rgba(53,105,90,.11); --err-soft: rgba(150,65,60,.10); --warn-soft: rgba(125,101,36,.12); --info-soft: rgba(58,81,122,.10); --ok-fg: #254b41; --err-fg: #6d2f2b; --warn-fg: #584718; --info-fg: #274050; --fig-1: #1e2326; --fig-2: #37556d; --fig-3: #35695a; --fig-4: #7d6524; --fig-5: #685e80; --fig-6: #6c3c4b; --ring: #232a2e; --glass: rgba(252,253,254,.66); --glass-strong: rgba(252,253,254,.90); --glass-border: rgba(255,255,255,.80); --glass-top: rgba(255,255,255,.92); --glass-hover: rgba(252,253,254,.99); --hair: rgba(30,35,38,.12); --sh: rgba(30,35,38,.13); --solid: #fcfdfe; --bloom: rgba(255,255,255,.88); --shadow-raised: 0 1px 2px rgba(30,35,38,.06); --shadow-float: 0 8px 32px rgba(30,35,38,.13); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(30,35,38,0.20); --fill-2: rgba(55,85,109,0.20); --fill-3: rgba(53,105,90,0.20); --fill-4: rgba(125,101,36,0.20); --fill-5: rgba(104,94,128,0.20); --fill-6: rgba(108,60,75,0.20); } /* ── Графит · тёмная (явный выбор) ── */ html:root:where([data-tone="graphite"][data-theme="dark"]) { color-scheme: dark; --n-0: #22262a; --n-2: #22262a; --n-3: #2d3237; --n-5: #59636a; --bg: #16191b; --bg-sunken: #101314; --surface: rgba(34,38,42,.88); --surface-2: rgba(46,51,56,.78); --sunken: rgba(0,0,0,.26); --text: #e4e9eb; --text-strong: #f8fbfc; --text-soft: #9aa4aa; --text-faint: #7d868c; --border: rgba(228,233,235,.14); --border-strong: rgba(228,233,235,.26); --rule: rgba(228,233,235,.18); --accent: #e4e9eb; --accent-hover: #f8fbfc; --accent-fg: #16191b; --accent-soft: rgba(228,233,235,.13); --accent-line: rgba(228,233,235,.30); --pen: #8fb3c4; --ok: #6fae98; --err: #e0918a; --warn: #ceb67c; --info: #97b3d6; --ok-soft: rgba(111,174,152,.13); --err-soft: rgba(224,145,138,.13); --warn-soft: rgba(206,182,124,.13); --info-soft: rgba(151,179,214,.13); --ok-fg: #a9d3c4; --err-fg: #f0c2bd; --warn-fg: #e6d3ae; --info-fg: #c1d7e0; --fig-1: #e4e9eb; --fig-2: #8bb3ca; --fig-3: #6fae98; --fig-4: #cfb079; --fig-5: #b69abf; --fig-6: #e87044; --ring: #e4e9eb; --glass: rgba(42,47,51,.60); --glass-strong: rgba(34,38,42,.88); --glass-border: rgba(228,233,235,.11); --glass-top: rgba(228,233,235,.09); --glass-hover: rgba(48,54,58,.94); --hair: rgba(248,251,252,.10); --sh: rgba(0,0,0,.40); --solid: #22262a; --bloom: rgba(228,233,235,.06); --shadow-raised: none; --shadow-float: 0 10px 34px rgba(0,0,0,.45); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(228,233,235,0.22); --fill-2: rgba(139,179,202,0.22); --fill-3: rgba(111,174,152,0.22); --fill-4: rgba(207,176,121,0.22); --fill-5: rgba(182,154,191,0.22); --fill-6: rgba(232,112,68,0.22); } /* ── Газета · светлая ── */ html:root:where([data-tone="news"]) { color-scheme: light; --n-0: #ffffff; --n-2: #efece7; --n-3: #e2ded7; --n-5: #b6b1a9; --bg: #faf8f4; --bg-sunken: #efece7; --surface: rgba(255,255,255,.94); --surface-2: rgba(255,255,255,.80); --sunken: rgba(19,19,19,.04); --text: #1b1b1a; --text-strong: #131313; --text-soft: #5e5c58; --text-faint: #807d78; --border: rgba(19,19,19,.18); --border-strong: rgba(19,19,19,.38); --rule: rgba(19,19,19,.28); --accent: #131313; --accent-hover: #000000; --accent-fg: #faf8f4; --accent-soft: rgba(19,19,19,.06); --accent-line: rgba(19,19,19,.32); --pen: #b3261e; --ok: #2f6b45; --err: #b3261e; --warn: #7a5a10; --info: #2b4f7d; --ok-soft: rgba(47,107,69,.10); --err-soft: rgba(179,38,30,.09); --warn-soft: rgba(122,90,16,.11); --info-soft: rgba(43,79,125,.09); --ok-fg: #1f4b30; --err-fg: #801a14; --warn-fg: #543e0b; --info-fg: #1e3958; --fig-1: #131313; --fig-2: #2b4f7d; --fig-3: #2f6b45; --fig-4: #7a5a10; --fig-5: #60486a; --fig-6: #9e335f; --ring: #131313; --glass: rgba(255,255,255,.74); --glass-strong: rgba(255,255,255,.94); --glass-border: rgba(19,19,19,.10); --glass-top: rgba(255,255,255,.90); --glass-hover: #ffffff; --hair: rgba(19,19,19,.14); --sh: rgba(19,19,19,.10); --solid: #ffffff; --bloom: rgba(255,255,255,.75); --shadow-raised: 0 1px 2px rgba(19,19,19,.05); --shadow-float: 0 6px 24px rgba(19,19,19,.10); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-xs: 4px; --fill-1: rgba(19,19,19,0.20); --fill-2: rgba(43,79,125,0.20); --fill-3: rgba(47,107,69,0.20); --fill-4: rgba(122,90,16,0.20); --fill-5: rgba(96,72,106,0.20); --fill-6: rgba(158,51,95,0.20); } html:root:where([data-tone="news"][data-theme="light"]) { color-scheme: light; --n-0: #ffffff; --n-2: #efece7; --n-3: #e2ded7; --n-5: #b6b1a9; --bg: #faf8f4; --bg-sunken: #efece7; --surface: rgba(255,255,255,.94); --surface-2: rgba(255,255,255,.80); --sunken: rgba(19,19,19,.04); --text: #1b1b1a; --text-strong: #131313; --text-soft: #5e5c58; --text-faint: #807d78; --border: rgba(19,19,19,.18); --border-strong: rgba(19,19,19,.38); --rule: rgba(19,19,19,.28); --accent: #131313; --accent-hover: #000000; --accent-fg: #faf8f4; --accent-soft: rgba(19,19,19,.06); --accent-line: rgba(19,19,19,.32); --pen: #b3261e; --ok: #2f6b45; --err: #b3261e; --warn: #7a5a10; --info: #2b4f7d; --ok-soft: rgba(47,107,69,.10); --err-soft: rgba(179,38,30,.09); --warn-soft: rgba(122,90,16,.11); --info-soft: rgba(43,79,125,.09); --ok-fg: #1f4b30; --err-fg: #801a14; --warn-fg: #543e0b; --info-fg: #1e3958; --fig-1: #131313; --fig-2: #2b4f7d; --fig-3: #2f6b45; --fig-4: #7a5a10; --fig-5: #60486a; --fig-6: #9e335f; --ring: #131313; --glass: rgba(255,255,255,.74); --glass-strong: rgba(255,255,255,.94); --glass-border: rgba(19,19,19,.10); --glass-top: rgba(255,255,255,.90); --glass-hover: #ffffff; --hair: rgba(19,19,19,.14); --sh: rgba(19,19,19,.10); --solid: #ffffff; --bloom: rgba(255,255,255,.75); --shadow-raised: 0 1px 2px rgba(19,19,19,.05); --shadow-float: 0 6px 24px rgba(19,19,19,.10); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-xs: 4px; --fill-1: rgba(19,19,19,0.20); --fill-2: rgba(43,79,125,0.20); --fill-3: rgba(47,107,69,0.20); --fill-4: rgba(122,90,16,0.20); --fill-5: rgba(96,72,106,0.20); --fill-6: rgba(158,51,95,0.20); } /* ── Газета · тёмная (явный выбор) ── */ html:root:where([data-tone="news"][data-theme="dark"]) { color-scheme: dark; --n-0: #242321; --n-2: #242321; --n-3: #31302d; --n-5: #5c5a55; --bg: #191817; --bg-sunken: #111110; --surface: rgba(36,35,33,.90); --surface-2: rgba(48,46,43,.80); --sunken: rgba(0,0,0,.28); --text: #f2f0ec; --text-strong: #ffffff; --text-soft: #a3a09a; --text-faint: #827f79; --border: rgba(242,240,236,.16); --border-strong: rgba(242,240,236,.34); --rule: rgba(242,240,236,.22); --accent: #f2f0ec; --accent-hover: #ffffff; --accent-fg: #191817; --accent-soft: rgba(242,240,236,.12); --accent-line: rgba(242,240,236,.32); --pen: #e0645a; --ok: #6fae8b; --err: #e88a80; --warn: #e8b45f; --info: #8fb0d4; --ok-soft: rgba(111,174,139,.13); --err-soft: rgba(232,138,128,.13); --warn-soft: rgba(232,180,95,.13); --info-soft: rgba(143,176,212,.13); --ok-fg: #a8d4bd; --err-fg: #f4bfb8; --warn-fg: #f0d7a6; --info-fg: #c2d6e8; --fig-1: #f2f0ec; --fig-2: #8fb0d4; --fig-3: #6fae8b; --fig-4: #e8b45f; --fig-5: #bb9ab9; --fig-6: #e36157; --ring: #f2f0ec; --glass: rgba(44,42,40,.62); --glass-strong: rgba(36,35,33,.90); --glass-border: rgba(242,240,236,.12); --glass-top: rgba(242,240,236,.08); --glass-hover: rgba(52,50,47,.95); --hair: rgba(255,255,255,.10); --sh: rgba(0,0,0,.42); --solid: #242321; --bloom: rgba(242,240,236,.05); --shadow-raised: none; --shadow-float: 0 8px 28px rgba(0,0,0,.45); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-xs: 4px; --fill-1: rgba(242,240,236,0.22); --fill-2: rgba(143,176,212,0.22); --fill-3: rgba(111,174,139,0.22); --fill-4: rgba(232,180,95,0.22); --fill-5: rgba(187,154,185,0.22); --fill-6: rgba(227,97,87,0.22); } /* Пользователь не выбирал тему — идём за системой. */ @media (prefers-color-scheme: dark) { html:root:where(:not([data-theme="light"])) { color-scheme: dark; --n-0: #262421; --n-2: #262421; --n-3: #332f2a; --n-5: #5b5349; --bg: #1c1b18; --bg-sunken: #141311; --surface: rgba(38,36,32,.88); --surface-2: rgba(50,47,42,.78); --sunken: rgba(0,0,0,.26); --text: #e8e5de; --text-strong: #fbf9f5; --text-soft: #a6a197; --text-faint: #857f75; --border: rgba(240,236,228,.14); --border-strong: rgba(240,236,228,.26); --rule: rgba(240,236,228,.18); --accent: #e8e5de; --accent-hover: #fbf9f5; --accent-fg: #1c1b18; --accent-soft: rgba(232,229,222,.13); --accent-line: rgba(232,229,222,.30); --pen: #d98b7e; --ok: #7fb894; --err: #e0918a; --warn: #cfb370; --info: #97b1d3; --ok-soft: rgba(127,184,148,.13); --err-soft: rgba(224,145,138,.13); --warn-soft: rgba(207,179,112,.13); --info-soft: rgba(151,177,211,.13); --ok-fg: #b6d9c3; --err-fg: #f0c2bd; --warn-fg: #ecd7ac; --info-fg: #c4d8e6; --fig-1: #e8e5de; --fig-2: #93b3cc; --fig-3: #7fb894; --fig-4: #d4b071; --fig-5: #bb9ac0; --fig-6: #be7a68; --ring: #e8e5de; --glass: rgba(46,44,40,.60); --glass-strong: rgba(38,36,32,.88); --glass-border: rgba(240,236,228,.11); --glass-top: rgba(240,236,228,.09); --glass-hover: rgba(54,51,46,.94); --hair: rgba(251,249,245,.10); --sh: rgba(0,0,0,.40); --solid: #262421; --bloom: rgba(240,236,228,.06); --shadow-raised: none; --shadow-float: 0 10px 34px rgba(0,0,0,.45); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(232,229,222,0.22); --fill-2: rgba(147,179,204,0.22); --fill-3: rgba(127,184,148,0.22); --fill-4: rgba(212,176,113,0.22); --fill-5: rgba(187,154,192,0.22); --fill-6: rgba(190,122,104,0.22); } html:root:where([data-tone="graphite"]:not([data-theme="light"])) { color-scheme: dark; --n-0: #22262a; --n-2: #22262a; --n-3: #2d3237; --n-5: #59636a; --bg: #16191b; --bg-sunken: #101314; --surface: rgba(34,38,42,.88); --surface-2: rgba(46,51,56,.78); --sunken: rgba(0,0,0,.26); --text: #e4e9eb; --text-strong: #f8fbfc; --text-soft: #9aa4aa; --text-faint: #7d868c; --border: rgba(228,233,235,.14); --border-strong: rgba(228,233,235,.26); --rule: rgba(228,233,235,.18); --accent: #e4e9eb; --accent-hover: #f8fbfc; --accent-fg: #16191b; --accent-soft: rgba(228,233,235,.13); --accent-line: rgba(228,233,235,.30); --pen: #8fb3c4; --ok: #6fae98; --err: #e0918a; --warn: #ceb67c; --info: #97b3d6; --ok-soft: rgba(111,174,152,.13); --err-soft: rgba(224,145,138,.13); --warn-soft: rgba(206,182,124,.13); --info-soft: rgba(151,179,214,.13); --ok-fg: #a9d3c4; --err-fg: #f0c2bd; --warn-fg: #e6d3ae; --info-fg: #c1d7e0; --fig-1: #e4e9eb; --fig-2: #8bb3ca; --fig-3: #6fae98; --fig-4: #cfb079; --fig-5: #b69abf; --fig-6: #e87044; --ring: #e4e9eb; --glass: rgba(42,47,51,.60); --glass-strong: rgba(34,38,42,.88); --glass-border: rgba(228,233,235,.11); --glass-top: rgba(228,233,235,.09); --glass-hover: rgba(48,54,58,.94); --hair: rgba(248,251,252,.10); --sh: rgba(0,0,0,.40); --solid: #22262a; --bloom: rgba(228,233,235,.06); --shadow-raised: none; --shadow-float: 0 10px 34px rgba(0,0,0,.45); --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-xs: 6px; --fill-1: rgba(228,233,235,0.22); --fill-2: rgba(139,179,202,0.22); --fill-3: rgba(111,174,152,0.22); --fill-4: rgba(207,176,121,0.22); --fill-5: rgba(182,154,191,0.22); --fill-6: rgba(232,112,68,0.22); } html:root:where([data-tone="news"]:not([data-theme="light"])) { color-scheme: dark; --n-0: #242321; --n-2: #242321; --n-3: #31302d; --n-5: #5c5a55; --bg: #191817; --bg-sunken: #111110; --surface: rgba(36,35,33,.90); --surface-2: rgba(48,46,43,.80); --sunken: rgba(0,0,0,.28); --text: #f2f0ec; --text-strong: #ffffff; --text-soft: #a3a09a; --text-faint: #827f79; --border: rgba(242,240,236,.16); --border-strong: rgba(242,240,236,.34); --rule: rgba(242,240,236,.22); --accent: #f2f0ec; --accent-hover: #ffffff; --accent-fg: #191817; --accent-soft: rgba(242,240,236,.12); --accent-line: rgba(242,240,236,.32); --pen: #e0645a; --ok: #6fae8b; --err: #e88a80; --warn: #e8b45f; --info: #8fb0d4; --ok-soft: rgba(111,174,139,.13); --err-soft: rgba(232,138,128,.13); --warn-soft: rgba(232,180,95,.13); --info-soft: rgba(143,176,212,.13); --ok-fg: #a8d4bd; --err-fg: #f4bfb8; --warn-fg: #f0d7a6; --info-fg: #c2d6e8; --fig-1: #f2f0ec; --fig-2: #8fb0d4; --fig-3: #6fae8b; --fig-4: #e8b45f; --fig-5: #bb9ab9; --fig-6: #e36157; --ring: #f2f0ec; --glass: rgba(44,42,40,.62); --glass-strong: rgba(36,35,33,.90); --glass-border: rgba(242,240,236,.12); --glass-top: rgba(242,240,236,.08); --glass-hover: rgba(52,50,47,.95); --hair: rgba(255,255,255,.10); --sh: rgba(0,0,0,.42); --solid: #242321; --bloom: rgba(242,240,236,.05); --shadow-raised: none; --shadow-float: 0 8px 28px rgba(0,0,0,.45); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-xs: 4px; --fill-1: rgba(242,240,236,0.22); --fill-2: rgba(143,176,212,0.22); --fill-3: rgba(111,174,139,0.22); --fill-4: rgba(232,180,95,0.22); --fill-5: rgba(187,154,185,0.22); --fill-6: rgba(227,97,87,0.22); } }