/* ============================================================ SmartRepost — Design Tokens Dark-first, Linear-leaning graphite + refined orange accent. Theme switches on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---- Accent (orange) — shared across themes ---- */ --accent: #F97316; /* orange-500 — primary */ --accent-hover: #FB8C3C; --accent-active: #EA580C; --accent-soft: rgba(249, 115, 22, 0.12); --accent-ring: rgba(249, 115, 22, 0.40); --accent-contrast: #1A1206; /* text on solid accent */ /* ---- Semantic ---- */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: #3B82F6; --success-soft: rgba(16, 185, 129, 0.14); --warning-soft: rgba(245, 158, 11, 0.14); --danger-soft: rgba(239, 68, 68, 0.14); --info-soft: rgba(59, 130, 246, 0.14); /* ---- Type ---- */ --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Radius ---- */ --r-xs: 5px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* ---- Spacing base (4pt) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 160ms; } /* ============================ DARK (default) ============================ */ :root, :root[data-theme="dark"] { --bg: #0B0B0E; /* app background */ --bg-subtle: #111114; --surface: #161619; /* cards */ --surface-2: #1D1D21; /* raised / hover */ --surface-3: #26262B; /* inputs, wells */ --border: #27272C; --border-strong:#36363D; --text: #FAFAFA; --text-muted: #9B9BA4; --text-subtle: #6C6C76; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 16px 48px rgba(0,0,0,0.55); --overlay: rgba(6, 6, 8, 0.72); color-scheme: dark; } /* ============================ DIM (между тёмной и светлой) ============================ */ :root[data-theme="dim"] { --bg: #1B1E24; /* мягкий графит-слейт */ --bg-subtle: #21242B; --surface: #272B33; /* cards */ --surface-2: #2F333C; /* raised / hover */ --surface-3: #393E48; /* inputs, wells */ --border: #393E48; --border-strong:#4A505C; --text: #ECEDF1; --text-muted: #A6AAB5; --text-subtle: #767B87; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.34); --shadow-lg: 0 16px 48px rgba(0,0,0,0.42); --overlay: rgba(12, 14, 18, 0.62); color-scheme: dark; } /* ============================ LIGHT ============================ */ :root[data-theme="light"] { --bg: #FBFBFA; --bg-subtle: #F3F3F1; --surface: #FFFFFF; --surface-2: #F7F7F6; --surface-3: #F0F0EE; --border: #E6E6E3; --border-strong:#D6D6D2; --text: #18181B; --text-muted: #5B5B62; --text-subtle: #8A8A92; --accent-contrast: #FFFFFF; --shadow-sm: 0 1px 2px rgba(24,24,27,0.06); --shadow-md: 0 4px 16px rgba(24,24,27,0.08); --shadow-lg: 0 16px 48px rgba(24,24,27,0.12); --overlay: rgba(24, 24, 27, 0.32); color-scheme: light; } /* ============================ Base reset ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent-soft); color: var(--text); } :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }