/* ========================================================= Featherline — Unified UI (tokens -> base -> layout -> components -> pages) ========================================================= */ /* ===================== 1) Global tokens (common) ===================== */ :root { /* Typography */ --font-base: "Segoe UI", system-ui, -apple-system, sans-serif; /* Layout */ /* Единая ширина “основной колонки” для большинства страниц. Если захочешь шире/уже — меняем только тут. */ --container-max: 720px; --container-pad: 14px; --header-h: 56px; /* Radius */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; /* Shadows */ --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.06); --shadow-popover: 0 14px 40px rgba(0, 0, 0, 0.18); --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.08); /* Motion */ --t-fast: 140ms; --easing: ease; /* Focus */ --focus-ring-size: 4px; } html.theme-preload *, html.theme-preload *::before, html.theme-preload *::after { transition: none !important; } /* ===================== 2) Theme tokens (light/dark) IMPORTANT: theme is applied on ===================== */ html[data-theme="light"] { --bg-page: #f7f5ff; --bg-main: var(--bg-page); --bg-card: #ffffff; --bg-header: #ffffff; --bg-elevated: #fbfaff; --text-main: #111827; --text-muted: #6b7280; --text-invert: #ffffff; --accent: #8b6cff; --accent-hover: #7a5af0; --accent-soft: #efeaff; --accent-border: #d9ccff; --btn-disabled-bg: rgba(139, 108, 255, 0.35); --btn-disabled-border: rgba(139, 108, 255, 0.35); --btn-disabled-text: rgba(255, 255, 255, 0.92); --danger: #b91c1c; --border-subtle: #e5e7eb; --border-soft: rgba(17, 24, 39, 0.10); --input-bg: #ffffff; --border-input: #e5e7eb; --focus-ring: rgba(139, 108, 255, 0.25); --btn-secondary-bg: #f1eeff; --btn-secondary-text: #3a2a8f; --chip-bg: #f1eeff; --chip-text: #3a2a8f; --glass-bg: rgba(255, 255, 255, 0.92); --glass-text: #111827; --glass-border: rgba(17, 24, 39, 0.12); } html[data-theme="dark"] { --bg-page: #0f1220; --bg-main: var(--bg-page); --bg-card: #14172a; --bg-header: #14172a; --bg-elevated: #10142a; --text-main: #e7e9f3; --text-muted: #a9aec3; --text-invert: #0f1220; --accent: #a78bfa; --accent-hover: #b8a0ff; --accent-soft: #2a2450; --accent-border: rgba(167, 139, 250, 0.35); --btn-disabled-bg: rgba(167, 139, 250, 0.22); --btn-disabled-border: rgba(167, 139, 250, 0.28); --btn-disabled-text: rgba(231, 233, 243, 0.85); --danger: #ff6b6b; --border-subtle: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.08); --input-bg: #0f1326; --border-input: rgba(255, 255, 255, 0.12); --focus-ring: rgba(167, 139, 250, 0.25); --btn-secondary-bg: #1a2140; --btn-secondary-text: #c4b5fd; --chip-bg: #1a2140; --chip-text: #c4b5fd; --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.42); --shadow-popover: 0 18px 55px rgba(0, 0, 0, 0.55); --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.08); --glass-bg: rgba(12, 14, 25, 0.90); --glass-text: #e7e9f3; --glass-border: rgba(255, 255, 255, 0.12); } /* ===================== 3) Base / Reset ===================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { background: var(--bg-page); color: var(--text-main); font-family: var(--font-base); } body { margin: 0; background: var(--bg-page); color: var(--text-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } a { color: inherit; } /* A11y: show focus for keyboard users */ :focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring); border-radius: 10px; }