/* Дизайн-токены. Все значения взяты из SPEC §5/§11 и `AI Popup.dc.html` как есть. Ничего не «улучшено» и не округлено: попап должен совпадать с референсом попиксельно. Тема выбирается атрибутом на : data-theme="dark" | "light" | "system". "system" отдаёт решение prefers-color-scheme (нужно на мобильных и в вебе); на десктопе тему проставляет Rust по системной настройке, чтобы не было мигания при первом кадре. */ :root { /* Геометрия — одинакова в обеих темах */ --pop-radius: 10px; --menu-radius: 9px; --pop-pad: 14px; --pop-width: 400px; --pop-width-expanded: 480px; --pop-body-max-height: 340px; --pop-gap: 12px; /* зазор окно ↔ выделение */ --screen-inset: 12px; /* отступ от краёв экрана */ --menu-width: 214px; /* Типографика */ --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-term: "Instrument Serif", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --size-ui: 14px; --line-ui: 1.4; --size-term: 19px; --line-term: 1.15; --size-secondary: 13px; --size-example: 13.5px; --size-label: 10px; --ls-label: 0.12em; /* Анимации */ --pop-in: 0.13s; --menu-in: 0.12s; --spin: 0.7s; --skeleton-cycle: 1.2s; } /* ── Тёмная тема (по умолчанию) ─────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: rgba(27, 24, 21, 0.87); --bg-solid: #1b1815; /* фолбэк, когда backdrop-filter недоступен */ --backdrop: blur(22px) saturate(150%); --border: rgba(255, 240, 220, 0.1); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 44px -10px rgba(28, 20, 10, 0.6); --divider: rgba(255, 240, 220, 0.1); --text: #f2ece1; --text-body: #e8e8ec; --text-muted: #a3a3ab; --accent: oklch(0.86 0.09 68); --accent-dim: oklch(0.7 0.11 62); /* маркеры, точка раскрытия, hover-рамка */ --label: oklch(0.72 0.1 62); --error: #e2705f; --error-text: #f0b0a8; --btn-border: rgba(255, 240, 220, 0.16); --btn-bg: rgba(255, 240, 220, 0.05); --btn-color: #cdc5b8; --btn-hover-bg: rgba(255, 240, 220, 0.1); --btn-hover-border: oklch(0.7 0.11 62); --btn-hover-color: oklch(0.86 0.09 68); --skeleton: rgba(255, 255, 255, 0.14); --spin-track: rgba(255, 255, 255, 0.22); --spin-head: #d9d9df; --scroll-thumb: rgba(255, 255, 255, 0.22); --simple: #e8e2d8; --example: #cdc5b8; --thread-q: oklch(0.82 0.09 68); --thread-a: #d8d2c7; --pending: #9c9488; --pending-spin-head: #d9d2c6; --input-border: rgba(255, 240, 220, 0.14); --input-bg: rgba(255, 240, 220, 0.045); --input-color: #f2ece1; --send-color: #ded5c6; } /* ── Светлая тема ───────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --bg: rgba(253, 251, 246, 0.9); --bg-solid: #fdfbf6; --border: rgba(60, 45, 25, 0.09); --shadow: 0 1px 2px rgba(40, 30, 15, 0.1), 0 16px 44px -12px rgba(40, 30, 15, 0.32); --divider: rgba(60, 45, 25, 0.1); --text: #221f1b; --text-body: #2c2a27; --text-muted: #6f6a63; --accent: oklch(0.48 0.11 48); --accent-dim: oklch(0.62 0.11 52); --label: oklch(0.55 0.11 52); --error: #c2503c; --error-text: #a3402f; --btn-border: rgba(60, 45, 25, 0.14); --btn-bg: rgba(60, 45, 25, 0.035); --btn-color: #6b6355; --btn-hover-bg: rgba(60, 45, 25, 0.07); --btn-hover-border: oklch(0.68 0.1 52); --btn-hover-color: oklch(0.45 0.11 48); --skeleton: rgba(20, 18, 15, 0.09); --spin-track: rgba(0, 0, 0, 0.14); --spin-head: #4a4741; --scroll-thumb: rgba(20, 18, 15, 0.2); --simple: #302c25; --example: #5c5548; --thread-q: oklch(0.48 0.11 48); --thread-a: #3a352d; --pending: #776f61; --pending-spin-head: #4a4741; --input-border: rgba(60, 45, 25, 0.14); --input-bg: rgba(60, 45, 25, 0.03); --input-color: #221f1b; --send-color: #4a4438; } /* data-theme="system": те же светлые значения, но по системной настройке. Дублирование неизбежно — CSS не умеет «наследовать» блок переменных. */ @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --bg: rgba(253, 251, 246, 0.9); --bg-solid: #fdfbf6; --border: rgba(60, 45, 25, 0.09); --shadow: 0 1px 2px rgba(40, 30, 15, 0.1), 0 16px 44px -12px rgba(40, 30, 15, 0.32); --divider: rgba(60, 45, 25, 0.1); --text: #221f1b; --text-body: #2c2a27; --text-muted: #6f6a63; --accent: oklch(0.48 0.11 48); --accent-dim: oklch(0.62 0.11 52); --label: oklch(0.55 0.11 52); --error: #c2503c; --error-text: #a3402f; --btn-border: rgba(60, 45, 25, 0.14); --btn-bg: rgba(60, 45, 25, 0.035); --btn-color: #6b6355; --btn-hover-bg: rgba(60, 45, 25, 0.07); --btn-hover-border: oklch(0.68 0.1 52); --btn-hover-color: oklch(0.45 0.11 48); --skeleton: rgba(20, 18, 15, 0.09); --spin-track: rgba(0, 0, 0, 0.14); --spin-head: #4a4741; --scroll-thumb: rgba(20, 18, 15, 0.2); --simple: #302c25; --example: #5c5548; --thread-q: oklch(0.48 0.11 48); --thread-a: #3a352d; --pending: #776f61; --pending-spin-head: #4a4741; --input-border: rgba(60, 45, 25, 0.14); --input-bg: rgba(60, 45, 25, 0.03); --input-color: #221f1b; --send-color: #4a4438; } } /* Мини-меню на мобильных в референсе есть только в тёмном варианте — так и оставлено: системные меню выделения текста и на светлой теме обычно тёмные. */ :root { --menu-bg: rgba(27, 24, 21, 0.92); --menu-backdrop: blur(18px) saturate(150%); --menu-border: rgba(255, 240, 220, 0.1); --menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -8px rgba(28, 20, 10, 0.55); --menu-divider: rgba(255, 240, 220, 0.12); --menu-text: #e8e2d8; --menu-accent: oklch(0.86 0.09 68); --menu-hover: rgba(255, 240, 220, 0.09); }