/* ============================================================ САМОТЛОР · Design tokens ──────────────────────────────────────────────────────────── Все темы и режимы управляются атрибутами на : data-theme = "blackyellow" | "bluegreen" | "coral" data-mode = "light" | "dark" data-density = "comfortable" | "compact" ──────────────────────────────────────────────────────────── Чтобы добавить новую тему — скопируйте любой блок [data-theme="…"][data-mode="light"] / "dark" и поменяйте hex. ============================================================ */ :root { /* ── type ─────────────────────────────────────────────── */ --font-display: "Bebas Neue", "Oswald", Impact, sans-serif; --font-sans: "Manrope", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* ── radii / motion ───────────────────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --ease: cubic-bezier(.2,.7,.2,1); /* ── density · comfortable (default) ──────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --pad-x: 18px; --card-pad: 16px; --text-base: 15px; --text-sm: 13px; --text-xs: 11px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 40px; --text-4xl: 56px; --text-5xl: 84px; } :root[data-density="compact"] { --space-1: 3px; --space-2: 6px; --space-3: 9px; --space-4: 12px; --space-5: 15px; --space-6: 18px; --space-7: 24px; --space-8: 30px; --pad-x: 14px; --card-pad: 12px; --text-base: 14px; --text-sm: 12px; --text-xs: 10px; --text-lg: 16px; --text-xl: 19px; --text-2xl: 24px; --text-3xl: 34px; --text-4xl: 46px; --text-5xl: 68px; } /* ================================================================= THEME 1 · Чёрно-жёлтая (основная) ================================================================= */ :root[data-theme="blackyellow"][data-mode="light"] { --bg: #F4F3EE; --surface: #FFFFFF; --surface-2: #ECEAE3; --surface-3: #0A0A0A; /* inverted block */ --on-surface-3: #FFFFFF; --fg: #0A0A0A; --fg-muted: #5C5C58; --fg-faint: #9A9A95; --line: #DEDCD4; --line-strong: #0A0A0A; --accent: #FFD400; /* main yellow */ --accent-fg: #0A0A0A; --accent-2: #0A0A0A; /* secondary = black */ --accent-2-fg: #FFD400; --signal-win: #1F7A3A; --signal-loss: #C0392B; --signal-live: #E61E2A; } :root[data-theme="blackyellow"][data-mode="dark"] { --bg: #0A0A0A; --surface: #161614; --surface-2: #211F1A; --surface-3: #FFD400; --on-surface-3: #0A0A0A; --fg: #F5F4EE; --fg-muted: #A09F97; --fg-faint: #5E5D57; --line: #2A2823; --line-strong: #FFD400; --accent: #FFD400; --accent-fg: #0A0A0A; --accent-2: #F5F4EE; --accent-2-fg: #0A0A0A; --signal-win: #3FD27A; --signal-loss: #FF6B5C; --signal-live: #FF3344; } /* ================================================================= THEME 2 · Сине-зелёно-белая (ocean) ================================================================= */ :root[data-theme="bluegreen"][data-mode="light"] { --bg: #EFF5F7; --surface: #FFFFFF; --surface-2: #DCE9EE; --surface-3: #001E3C; --on-surface-3: #DFFBE9; --fg: #0A1F33; --fg-muted: #4F6B82; --fg-faint: #8FA6BB; --line: #C8DAE2; --line-strong: #0A1F33; --accent: #0046C2; --accent-fg: #FFFFFF; --accent-2: #00B884; --accent-2-fg: #001E2A; --signal-win: #00B884; --signal-loss: #E0445E; --signal-live: #FF2D55; } :root[data-theme="bluegreen"][data-mode="dark"] { --bg: #03121F; --surface: #0A2236; --surface-2: #103149; --surface-3: #00B884; --on-surface-3: #03121F; --fg: #E6F2F7; --fg-muted: #8AA8BC; --fg-faint: #4E6C82; --line: #143C57; --line-strong: #00B884; --accent: #3E8CFF; --accent-fg: #001022; --accent-2: #19E0AC; --accent-2-fg: #002418; --signal-win: #19E0AC; --signal-loss: #FF5C7A; --signal-live: #FF3855; } /* ================================================================= THEME 3 · Коралл-оранж-жёлтый (warm) ================================================================= */ :root[data-theme="coral"][data-mode="light"] { --bg: #FFF6EB; --surface: #FFFFFF; --surface-2: #FFE6CC; --surface-3: #2A1604; --on-surface-3: #FFD8B5; --fg: #2A1604; --fg-muted: #7A5C40; --fg-faint: #B89A7C; --line: #F0DCC0; --line-strong: #2A1604; --accent: #FF5A36; --accent-fg: #FFFFFF; --accent-2: #FFB200; --accent-2-fg: #2A1604; --signal-win: #2E8B57; --signal-loss: #C0392B; --signal-live: #FF2D55; } :root[data-theme="coral"][data-mode="dark"] { --bg: #1A0A05; --surface: #25130A; --surface-2: #311B0F; --surface-3: #FFB200; --on-surface-3: #1A0A05; --fg: #FFE8D8; --fg-muted: #B7937A; --fg-faint: #715542; --line: #3A1F11; --line-strong: #FF7651; --accent: #FF7651; --accent-fg: #1A0A05; --accent-2: #FFC633; --accent-2-fg: #1A0A05; --signal-win: #3FCB7A; --signal-loss: #FF6464; --signal-live: #FF3F5C; } /* ─── universal helpers ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; }