/* =========================================================
   AniLog — токены, сброс, типографика и служебные утилиты
   ========================================================= */

/* =========================================================
   AniLog — личный аниме-дневник
   Визуальная система: тёмный минимализм + стекло + неон
   ========================================================= */

:root {
  --bg: #07080e;
  --bg-elevated: #0c0e17;
  --panel: rgba(20, 22, 34, 0.62);
  --panel-strong: rgba(17, 19, 30, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.035);
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #f5f3fb;
  --text-soft: #c5c3d2;
  --muted: #9693a8;
  --muted-2: #817e93;

  --violet: #8b5cf6;
  --violet-light: #b79cff;
  --indigo: #6366f1;
  --cyan: #38bdf8;
  --teal: #5eead4;
  --amber: #fbbf24;
  --rose: #fb7185;

  --status-watching: #5eead4;
  --status-completed: #86efac;
  --status-planned: #fbbf24;
  --status-dropped: #fb7185;
  --status-onhold: #94a3b8;

  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 14, 0) 0%, rgba(7, 8, 14, 0.58) 72%, #07080e 100%),
    radial-gradient(ellipse 80% 50% at 50% -12%, rgba(86, 67, 151, 0.2), transparent 72%);
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

::selection {
  background: rgba(139, 92, 246, 0.4);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.container {
  width: min(1280px, calc(100% - 64px));
  margin-inline: auto;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--violet);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}