/* ─── Дизайн-токены InnerMe ─── Меняй цвета/размеры здесь — всё приложение подхватит. */ :root { /* фон и текст */ --bg: #FBF8F3; --bg-2: #F3EEE6; --card: #FFFFFF; --ink: #24252D; --ink-2: #6B6D7A; --ink-3: #A5A7B3; --line: #ECE7DE; /* акценты (по уровням настроения) */ --amber: #F5B700; --amber-soft: #FFF3C4; --amber-ink: #6B4E00; --violet: #9B6BCF; --violet-soft: #EFE5FA; --violet-ink: #4B2D73; --mint: #4FC38F; --mint-soft: #DDF5E9; --mint-ink: #145C3A; --sky: #5B8DEF; --sky-soft: #E3ECFF; --rose: #F27E93; --rose-soft: #FFE4EA; --rose-ink: #8A2A40; --accent: var(--amber); --accent-soft: var(--amber-soft); --accent-ink: var(--amber-ink); /* форма */ --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-pill: 999px; --shadow: 0 8px 24px rgba(36, 37, 45, .08); --shadow-lg: 0 16px 40px rgba(36, 37, 45, .14); /* типографика */ --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: .78rem; --fs-sm: .9rem; --fs: 1.02rem; --fs-lg: 1.25rem; --fs-xl: 1.6rem; --fs-2xl: 2.1rem; /* отступы */ --gut: 20px; --maxw: 520px; /* анимация */ --ease: cubic-bezier(.2, .8, .2, 1); --t: .32s; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15161B; --bg-2: #1D1E25; --card: #22232B; --ink: #F1EFEA; --ink-2: #A9ABB8; --ink-3: #6E7080; --line: #2E2F39; --amber-soft: #3A2E08; --amber-ink: #FFE18A; --rose-ink: #FFB3C1; --violet-soft: #2C2140; --violet-ink: #D9C4F5; --mint-soft: #14302A; --mint-ink: #A8ECCB; --sky-soft: #1B2540; --rose-soft: #3A1F27; --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 16px 40px rgba(0,0,0,.5); } } :root[data-theme="dark"] { --bg: #15161B; --bg-2: #1D1E25; --card: #22232B; --ink: #F1EFEA; --ink-2: #A9ABB8; --ink-3: #6E7080; --line: #2E2F39; --amber-soft: #3A2E08; --amber-ink: #FFE18A; --rose-ink: #FFB3C1; --violet-soft: #2C2140; --violet-ink: #D9C4F5; --mint-soft: #14302A; --mint-ink: #A8ECCB; --sky-soft: #1B2540; --rose-soft: #3A1F27; --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 16px 40px rgba(0,0,0,.5); } /* цветовая тема уровня — вешается на */ body[data-level="low"] { --accent: var(--violet); --accent-soft: var(--violet-soft); --accent-ink: var(--violet-ink); } body[data-level="mid"] { --accent: var(--mint); --accent-soft: var(--mint-soft); --accent-ink: var(--mint-ink); } body[data-level="high"] { --accent: var(--amber); --accent-soft: var(--amber-soft); --accent-ink: var(--amber-ink); }