/* FoxFlow — дизайн-токены. Séance: тёмная стеклянная плита на светло-серой сцене,
   чёрно-белая гамма (нейтрали тонированы в холодный), редакторский serif для заголовков.
   Product-UI: фиксированная rem-шкала (не fluid), полный набор состояний. */

:root {
  /* --- Нейтрали (OKLCH, тонированы в холодный, без чистого #000/#fff) --- */
  --ink: oklch(0.96 0.004 264);        /* основной текст */
  --ink-soft: oklch(0.75 0.006 264);   /* вторичный */
  --ink-faint: oklch(0.56 0.006 264);  /* третичный / иконки покоя */
  --ink-invert: oklch(0.16 0.006 264); /* текст на светлой пилюле */

  /* Сцена за стеклом: размытый средне-серый градиент */
  --scene-1: oklch(0.74 0.006 264);
  --scene-2: oklch(0.64 0.008 264);
  --scene-3: oklch(0.84 0.005 264);
  --scene-dark: oklch(0.42 0.01 264);

  /* Стекло: очень тёмное прозрачное, сцена просвечивает сквозь блюр */
  --glass-bg: oklch(0.16 0.006 264 / 0.72);
  --surface: oklch(1 0 0 / 0.05);       /* поверхность карточки на стекле */
  --surface-hover: oklch(1 0 0 / 0.08);
  --line: oklch(1 0 0 / 0.1);           /* hairline */
  --line-strong: oklch(1 0 0 / 0.16);
  --inset: inset 0 1px 0 oklch(1 0 0 / 0.06);

  /* Акцент — светлая пилюля действия на тёмном (séance: кнопка TODO) */
  --accent: oklch(0.96 0.004 264);
  --accent-hover: oklch(1 0 0);
  --focus: oklch(0.7 0.13 250);         /* кольцо фокуса — единственный хроматический штрих */

  /* Семантика статусов (приглушённая) */
  --ok: oklch(0.72 0.15 150);
  --danger: oklch(0.7 0.15 25);

  /* --- Типографика --- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Фиксированная шкала (product-UI), ratio ~1.25 */
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.75rem;

  /* --- Радиусы --- */
  --r-lg: 1.1rem;
  --r-md: 0.8rem;
  --r-pill: 999px;

  /* --- Тени --- */
  --shadow-amb: 0 20px 50px -28px oklch(0.2 0.02 264 / 0.5);
  --shadow-lift: 0 30px 70px -34px oklch(0.2 0.02 264 / 0.6);

  /* --- Блюр --- */
  --blur: 28px;

  /* --- Ритм и движение --- */
  --gap: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-expo-подобная, без bounce */
  --dur: 0.22s;
  --dur-slow: 0.4s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100dvh;
  overflow: hidden;
}

/* Сцена за стеклом: размытый серый градиент с мягкими светлыми и тёмными пятнами. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(34rem 40rem at 72% 16%, var(--scene-dark), transparent 60%),
    radial-gradient(26rem 30rem at 20% 80%, var(--scene-dark), transparent 62%),
    radial-gradient(48rem 48rem at 4% 4%, var(--scene-3), transparent 46%),
    linear-gradient(155deg, var(--scene-1), var(--scene-2));
  filter: blur(2px);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }

/* Единое кольцо фокуса для клавиатуры (a11y) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-md); }
:focus:not(:focus-visible) { outline: none; }

/* Тонкий скроллбар в тон стекла. Firefox — через scrollbar-*, WebKit — через ::-webkit-*. */
* { scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / 0.18) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(1 0 0 / 0.16);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background var(--dur) var(--ease);
}
::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.32); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}