/** * DeSent — Shared design tokens. * * Linked first by every page (landing, inbox, tiers, admin). Defines the * full color palette for both themes, the auto-detect fallback, plus the * spacing / radius / shadow / typography scales. * * Theme selection precedence: * 1. Explicit user choice: * (set by /assets/js/theme.js, persisted in localStorage.prefs.theme) * 2. OS preference via prefers-color-scheme * 3. Default: dark * * Token naming convention is the short-name system already used by * inbox.php / tiers.html / admin.php (--bg, --card, --accent, ...). */ /* ---------------------------------------------------------------------- DARK (default theme — amber accent retained) ---------------------------------------------------------------------- */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0D0D1A; --card: #1A1A2E; --hover: #2A2A3E; --border: #2A2A3E; --border-strong:#3A3A4E; /* Accents */ --accent: #FFB300; --accent-hover: #E5A000; --accent-soft: rgba(255, 179, 0, 0.16); /* pill / tint backgrounds */ --accent-line: rgba(255, 179, 0, 0.55); /* selected-row outline */ /* Status (same family, tuned for dark) */ --success: #00C8B4; --success-soft: rgba(0, 200, 180, 0.18); --error: #FF3B30; --error-soft: rgba(255, 59, 48, 0.16); --warning: #FFB300; --warning-soft: rgba(255, 179, 0, 0.16); /* Text */ --text: #F0F0E8; --muted: #888899; /* Shadows — darker, more pronounced on dark canvas */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); /* Modal backdrop */ --backdrop: rgba(0, 0, 0, 0.70); } /* ---------------------------------------------------------------------- LIGHT (new theme — classic blue accent #0066CC) ---------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; /* Surfaces */ --bg: #FFFFFF; --card: #F6F7F9; --hover: #ECEEF1; --border: #D1D5DB; --border-strong:#B0B6BE; /* Accents — classic blue, distinct from Telegram #229ED9 */ --accent: #0066CC; --accent-hover: #0052A3; --accent-soft: rgba(0, 102, 204, 0.10); --accent-line: rgba(0, 102, 204, 0.45); /* Status */ --success: #1A7F4B; --success-soft: rgba(26, 127, 75, 0.12); --error: #C81E1E; --error-soft: rgba(200, 30, 30, 0.10); --warning: #B25F00; --warning-soft: rgba(178, 95, 0, 0.12); /* Text */ --text: #0F1419; --muted: #5B6770; /* Shadows — lighter, crisper */ --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06); --shadow-md: 0 2px 8px rgba(15, 20, 25, 0.08); --shadow-lg: 0 8px 24px rgba(15, 20, 25, 0.12); /* Modal backdrop */ --backdrop: rgba(15, 20, 25, 0.45); } /* ---------------------------------------------------------------------- OS-preference auto-detect — only applies when the user has NOT made an explicit choice. theme.js sets data-theme on when the user clicks the toggle, which overrides this. ---------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #FFFFFF; --card: #F6F7F9; --hover: #ECEEF1; --border: #D1D5DB; --border-strong:#B0B6BE; --accent: #0066CC; --accent-hover: #0052A3; --accent-soft: rgba(0, 102, 204, 0.10); --accent-line: rgba(0, 102, 204, 0.45); --success: #1A7F4B; --success-soft: rgba(26, 127, 75, 0.12); --error: #C81E1E; --error-soft: rgba(200, 30, 30, 0.10); --warning: #B25F00; --warning-soft: rgba(178, 95, 0, 0.12); --text: #0F1419; --muted: #5B6770; --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06); --shadow-md: 0 2px 8px rgba(15, 20, 25, 0.08); --shadow-lg: 0 8px 24px rgba(15, 20, 25, 0.12); --backdrop: rgba(15, 20, 25, 0.45); } } /* ---------------------------------------------------------------------- Shared scales — identical across themes ---------------------------------------------------------------------- */ :root { /* Spacing — 4px base */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* Radius — SQUARE aesthetic per design direction. UI chrome (cards, inputs, buttons) = 0. Round elements (avatars, status dots, pills) use 99px / 50% directly. */ --radius: 0; /* default for cards/inputs/buttons */ --radius-sm: 0; /* chips, small containers */ --radius-pill: 99px; /* Motion */ --transition: 0.15s ease; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Anti-FOUC: paint the correct background immediately, before theme.js runs. Matches the prefers-color-scheme branch above. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) body { background-color: #FFFFFF; color: #0F1419; } } :root:not([data-theme]) body { background-color: #0D0D1A; color: #F0F0E8; }