/* Дизайн-токены Sphere — единственный источник цветов и типографики. Светлая тема — канон из CLAUDE.md §2. Тёмная — производная, сохраняющая контраст и бренд. Переключение темы: [data-theme="dark"] / [data-theme="light"] на , иначе — prefers-color-scheme. */ :root{ --paper: #F4F6F5; --card: #FFFFFF; --ink: #17211D; --muted: #5B6B73; --line: #DFE4E2; --accent: #2F5D50; --accent-ink: #FFFFFF; --amber: #D9A441; --fill: #FFF3D6; --fill-line: #D9A441; --fill-ink: #6B4E10; /* восемь сфер — канонический порядок, CLAUDE.md §2 */ --s1: #3EB489; /* Тело и Здоровье · Мята */ --s2: #9B8AC4; /* Ум и Разум · Кварц */ --s3: #D9A441; /* Доход и Финансы · Янтарь */ --s4: #5B6B73; /* Быт и Окружающая среда · Гранит */ --s5: #3B4C8C; /* Знания и Навыки · Полночь */ --s6: #C1633D; /* Социум и Отношения · Терракота */ --s7: #2F5D50; /* Духовность и Смысл · Хвоя */ --s8: #FF8A65; /* Личность и Характер · Рассвет */ --radius: 9px; --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper: #11181A; --card: #1A2224; --ink: #ECF1EE; --muted: #9BAAA4; --line: #2A3436; --accent: #6FBBA0; --accent-ink: #0E1613; --amber: #E5BA5C; --fill: #3A2F14; --fill-line: #E5BA5C; --fill-ink: #F4D896; } } :root[data-theme="dark"]{ --paper: #11181A; --card: #1A2224; --ink: #ECF1EE; --muted: #9BAAA4; --line: #2A3436; --accent: #6FBBA0; --accent-ink: #0E1613; --amber: #E5BA5C; --fill: #3A2F14; --fill-line: #E5BA5C; --fill-ink: #F4D896; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:var(--accent)} /* фирменная полоса из восьми цветов сфер — на каждой странице без исключения */ .rail{display:flex;height:4px} .rail span{flex:1;background:var(--rail-color, transparent)} .rail span:nth-child(1){background:var(--s1)} .rail span:nth-child(2){background:var(--s2)} .rail span:nth-child(3){background:var(--s3)} .rail span:nth-child(4){background:var(--s4)} .rail span:nth-child(5){background:var(--s5)} .rail span:nth-child(6){background:var(--s6)} .rail span:nth-child(7){background:var(--s7)} .rail span:nth-child(8){background:var(--s8)} /* видимый плейсхолдер — не дать опубликовать незаполненное поле */ .fill{ background:var(--fill); color:var(--fill-ink); border-bottom:1px dashed var(--fill-line); padding:0 3px; border-radius:3px; font-weight:600; } /* единый футер — общий для всех страниц (P0-2) */ .site-footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)} .site-footer-links{display:flex;gap:8px 18px;flex-wrap:wrap;margin-bottom:12px} .site-footer-links a{color:var(--muted);text-decoration:none;font-weight:600} .site-footer-links a:hover{color:var(--accent)} .site-footer-meta{margin:0} /* переключатель темы — общий для всех страниц */ .theme-toggle{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);background:var(--card);color:var(--muted); border-radius:999px;padding:6px 12px;font:500 13px/1 var(--font-sans); cursor:pointer; } .theme-toggle:hover{color:var(--ink);border-color:var(--accent)} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:4px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important} }