/** * Светлая тема по умолчанию (:root), тёмная — класс .dark на . * Переменные совпадают с ключами в tailwind-perehvat.js (--ph-*). */ :root { color-scheme: light; --ph-background: #f4f5f8; --ph-on-background: #141414; --ph-surface: #ffffff; --ph-on-surface: #1a1c1e; --ph-on-surface-variant: #43474e; --ph-surface-dim: #e8eaef; --ph-surface-bright: #ffffff; --ph-surface-variant: #e1e2e9; --ph-surface-container-lowest: #ffffff; --ph-surface-container-low: #f7f8fb; --ph-surface-container: #eff1f6; --ph-surface-container-high: #e6e8ef; --ph-surface-container-highest: #dce0ea; --ph-outline: #73767f; --ph-outline-variant: #c4c6d0; --ph-primary: #1559e6; --ph-on-primary: #ffffff; --ph-primary-container: #d6e3ff; --ph-on-primary-container: #001c3a; --ph-primary-fixed: #d8e2ff; --ph-primary-fixed-dim: #adc6ff; --ph-on-primary-fixed: #001a41; --ph-on-primary-fixed-variant: #004494; --ph-inverse-primary: #adc6ff; --ph-secondary: #9c4146; --ph-on-secondary: #ffffff; --ph-secondary-container: #ffdad6; --ph-on-secondary-container: #410003; --ph-secondary-fixed: #ffdad5; --ph-secondary-fixed-dim: #ffb4a9; --ph-on-secondary-fixed: #410001; --ph-on-secondary-fixed-variant: #930004; --ph-tertiary: #5e5e62; --ph-on-tertiary: #ffffff; --ph-tertiary-container: #e4e1e6; --ph-on-tertiary-container: #1f1a23; --ph-tertiary-fixed: #e3e2e2; --ph-tertiary-fixed-dim: #c7c6c6; --ph-on-tertiary-fixed: #1b1c1c; --ph-on-tertiary-fixed-variant: #464747; --ph-error: #ba1a1a; --ph-on-error: #ffffff; --ph-error-container: #ffdad6; --ph-on-error-container: #410002; --ph-success: #0d9668; --ph-inverse-surface: #303034; --ph-inverse-on-surface: #f4f4f5; --ph-surface-tint: #1559e6; --ph-proto-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.14); } .dark { color-scheme: dark; /* Чуть светлее «глубокого чёрного»: меньше давления на глаз, мягче иерархия карточек */ --ph-background: #1c1d21; --ph-on-background: #eceae8; --ph-surface: #1e1f24; --ph-on-surface: #eceae8; --ph-on-surface-variant: #aeb6c7; --ph-surface-dim: #1a1b1e; --ph-surface-bright: #454854; --ph-surface-variant: #3c3e46; --ph-surface-container-lowest: #18191d; --ph-surface-container-low: #25262c; --ph-surface-container: #2a2b32; --ph-surface-container-high: #32333b; --ph-surface-container-highest: #3a3c44; --ph-outline: #949aab; --ph-outline-variant: #535b6b; --ph-primary: #adc6ff; --ph-on-primary: #002e69; --ph-primary-container: #4d8efe; --ph-on-primary-container: #00285c; --ph-primary-fixed: #d8e2ff; --ph-primary-fixed-dim: #adc6ff; --ph-on-primary-fixed: #001a41; --ph-on-primary-fixed-variant: #004494; --ph-inverse-primary: #005ac1; --ph-secondary: #ffb4a9; --ph-on-secondary: #690002; --ph-secondary-container: #9c0005; --ph-on-secondary-container: #ffa497; --ph-secondary-fixed: #ffdad5; --ph-secondary-fixed-dim: #ffb4a9; --ph-on-secondary-fixed: #410001; --ph-on-secondary-fixed-variant: #930004; --ph-tertiary: #c7c6c6; --ph-on-tertiary: #303031; --ph-tertiary-container: #919090; --ph-on-tertiary-container: #292a2a; --ph-tertiary-fixed: #e3e2e2; --ph-tertiary-fixed-dim: #c7c6c6; --ph-on-tertiary-fixed: #1b1c1c; --ph-on-tertiary-fixed-variant: #464747; --ph-error: #ffb4ab; --ph-on-error: #690005; --ph-error-container: #93000a; --ph-on-error-container: #ffdad6; --ph-success: #34d399; --ph-inverse-surface: #eceae8; --ph-inverse-on-surface: #2a2b30; --ph-surface-tint: #b4c9ff; --ph-proto-shadow: 0 14px 44px -10px rgba(8, 12, 24, 0.42); }