/* ============================================================ COHEE — тёплая тёмная тема (карамель, тёмный шоколад, крем). Дельта на :root=dark: переопределяет отличия, остальное (галерея, PiP, donate-акцент=бренд, qr-бумага) наследуется из тёмной базы. Активируется data-theme="cohee". Селектор html[data-theme=…] (специфичность 0,1,1) — надёжно перебивает тёмную базу :root. ============================================================ */ html[data-theme="cohee"] { /* ── 1. БРЕНД — мягкий янтарно-карамельный ── */ --brand: #d97736; --brand-700: #b55a22; /* hover, active */ --brand-300: #f0a16c; /* осветлённый */ /* ── 2. ФОНЫ — глубокий кофейный / шоколадный крафт ── */ --bg-page: #161211; --bg-header: #100d0c; --bg-form: #211a18; --bg-post-op: #261f1d; --bg-post-reply: #1e1817; --bg-input: #130f0f; --bg-tag: #2e2522; --bg-code: #0b0909; --bg-sidebar: #100d0c; --bg-admin-side: #100d0c; --bg-admin-head: #211a18; --bg-meta: rgba(0, 0, 0, 0.35); /* ── 3. ТЕКСТ — тёплый кремовый и мягкий ореховый ── */ --text-main: #f4ebd9; /* очень мягкий белый с каплей тепла */ --text-dim: #a89984; /* приглушённый крафтовый */ --text-muted: #7c6f64; /* мета, тусклый земляной */ --text-header: #ffffff; --text-link: #6ca8a8; /* мягкий бирюзово-водный (контраст к карамели) */ --text-link-hover: #8ec07c; /* тёплый фисташковый на ховер */ --text-name: #dfa45f; /* благородное золото для имени */ --text-subject: var(--brand-300); --text-btn: #161211; /* тёмный текст на светлых кнопках бренда */ --text-green: #b8bb26; /* ламповый гринтекст */ --text-num: #7c6f64; --text-relnum: #504945; /* ── 4. ГРАНИЦЫ — органичные земляные оттенки ── */ --border-post: #322825; --border-form: #3c302c; --border-input: #3c302c; --border-sep: #261f1d; --border-op: var(--brand); /* ── 5. СКРУГЛЕНИЯ / МЕТРИКИ / ШРИФТ ── */ --radius: 10px; /* чуть мягче углы для уюта */ --radius-lg: 14px; --radius-sm: 6px; --radius-pill: 999px; --site-width: 1200px; --font-size: 14px; --line-height: 1.65; --font-family: "Segoe UI", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Consolas", "SF Mono", Menlo, monospace; /* ── 6. ТЕНИ / СКРИМЫ / СЛОИ ── */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.65); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.85); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6); --shadow-xl: 0 12px 50px rgba(0, 0, 0, 0.7); --shadow-color: rgba(0, 0, 0, 0.5); --ring-hairline: rgba(0, 0, 0, 0.2); --scrim: rgba(0, 0, 0, 0.6); --scrim-strong: rgba(0, 0, 0, 0.7); --on-media: #ffffff; --modal-overlay: rgba(16, 13, 12, 0.85); /* тонирование под цвет фона */ /* ── 7. SAGE ── */ --sage-color: #d65d0e; --sage-bg: color-mix(in srgb, var(--sage-color) 12%, transparent); /* ── 8. БЕЙДЖИ И АКЦЕНТЫ КОМПОНЕНТОВ ── */ --link: var(--text-link); --crimson-soft: #b16286; --fav-star: #fabd2f; --fav-star-dim: #d79921; --opmod-color: #689d6a; --opmod-bg: rgba(104, 157, 106, 0.14); --opmod-border: rgba(104, 157, 106, 0.3); --pc-badge-color: #7daea3; --pc-badge-bg: rgba(125, 174, 163, 0.12); --pc-badge-bg-hover:rgba(125, 174, 163, 0.22); --pc-badge-border: rgba(125, 174, 163, 0.28); --via-color: #b16286; --via-bg: rgba(177, 98, 134, 0.14); --via-border: rgba(177, 98, 134, 0.3); --fb-accent: #d79921; --fb-accent-strong: #fabd2f; --fb-accent-bg: rgba(215, 153, 33, 0.14); /* ── 9. АЛЕРТЫ ── */ --alert-error-bg: color-mix(in srgb, var(--brand) 12%, transparent); --alert-error-border: color-mix(in srgb, var(--brand) 28%, transparent); --alert-error-color: var(--brand-300); --alert-success-bg: rgba(184, 187, 38, 0.08); --alert-success-border: rgba(184, 187, 38, 0.24); --alert-success-color: #b8bb26; --alert-info-bg: rgba(108, 168, 168, 0.08); --alert-info-border: rgba(108, 168, 168, 0.24); --alert-info-color: #8ec07c; --alert-warning-bg: rgba(215, 153, 33, 0.08); --alert-warning-border: rgba(215, 153, 33, 0.24); --alert-warning-color: #fabd2f; /* ── 10. КНОПКИ МОДЕРАЦИИ ── */ --mod-del-color: var(--brand-300); --mod-del-border: color-mix(in srgb, var(--brand) 40%, transparent); --mod-del-hover-bg: color-mix(in srgb, var(--brand) 15%, transparent); --mod-edit-color: #b8bb26; --mod-edit-border: rgba(184, 187, 38, 0.3); --mod-edit-hover-bg:rgba(184, 187, 38, 0.12); --mod-ip-color: #6ca8a8; --mod-ip-border: rgba(108, 168, 168, 0.3); --mod-ip-hover-bg: rgba(108, 168, 168, 0.12); --mod-pin-color: #8ec07c; --mod-pin-border: rgba(142, 192, 124, 0.3); --mod-pin-hover-bg: rgba(142, 192, 124, 0.12); --mod-lock-color: #f0a16c; --mod-lock-border: rgba(240, 161, 108, 0.3); --mod-lock-hover-bg:rgba(240, 161, 108, 0.12); --mod-more-color: var(--text-muted); --mod-more-border: var(--border-sep); --mod-more-hover-bg:var(--bg-tag); /* ── 11. ТЕГИ СОСТОЯНИЯ ТРЕДА ── */ --tag-pinned-bg: rgba(142, 192, 124, 0.08); --tag-pinned-color: #8ec07c; --tag-pinned-border:rgba(142, 192, 124, 0.2); --tag-locked-bg: rgba(240, 161, 108, 0.08); --tag-locked-color: #f0a16c; --tag-locked-border:rgba(240, 161, 108, 0.2); --tag-nsfw-bg: color-mix(in srgb, var(--brand) 10%, transparent); --tag-nsfw-color: var(--brand-300); --tag-nsfw-border: color-mix(in srgb, var(--brand) 24%, transparent); --tag-default-bg: var(--bg-tag); --tag-default-color:var(--brand-300); --tag-default-border: color-mix(in srgb, var(--brand) 22%, transparent); --op-badge-bg: rgba(184, 187, 38, 0.1); --op-badge-color: #b8bb26; --op-badge-border: rgba(184, 187, 38, 0.22); /* ── 12. ШАПКА ── */ --hdr-link: rgba(244, 235, 217, 0.75); --hdr-link-hover: #ffffff; --hdr-btn-color: rgba(244, 235, 217, 0.7); --hdr-btn-hover: #ffffff; --hdr-btn-hover-bg: rgba(255, 255, 255, 0.08); --hdr-border: transparent; /* ── 13. ГАЛЕРЕЯ ── */ --gallery-media-bg: #0b0909; /* ── 14. НЕ ЗАВИСИТ ОТ ТЕМЫ ── */ --yt-red: #b83d3d; /* чуть приглушённый красный */ --knob: #f4ebd9; --mk-big: 1.45em; --mk-small: 0.8em; --hl-bg: #ebd291; /* маркер «под старину» */ --hl-color: #261f1d; } html[data-theme="cohee"] { color-scheme: dark; }