@import url('variables.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; min-height: 100vh; }

.page-bg { background-color: var(--color-bg-page); }

.container { width: 100%; max-width: var(--container-md); margin: 0 auto; padding: var(--spacing-6) var(--spacing-4); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

h1, h2, h3, h4 { line-height: 1.3; font-weight: var(--font-weight-semibold); color: var(--color-text); letter-spacing: -0.01em; }
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p { color: var(--color-text-secondary); line-height: 1.6; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }

img { max-width: 100%; height: auto; }

::selection { background: var(--color-accent-light); color: var(--color-accent); }

/* Скроллбар */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Анимация появления тоста снизу вверх */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}