/* FoxFlow — дизайн-токены. Тот же фирстиль, что у расширения: тёплый графит,
   персиковый акцент, шрифт Manrope, double-bezel тени, экспоненциальный ease-out.
   Имена переменных сохранены — компоненты и разметка перекрашиваются автоматически. */

:root {
  /* --- Нейтрали (OKLCH, тёплый тинт к фону — не чистый чёрный/белый) --- */
  --ink: oklch(0.94 0.004 70);          /* основной текст — молочный */
  --ink-soft: oklch(0.70 0.006 65);     /* вторичный */
  --ink-faint: oklch(0.52 0.006 65);    /* третичный / иконки покоя, плейсхолдеры */
  --ink-invert: oklch(0.20 0.006 60);   /* текст на светлой пилюле */

  /* Сцена за стеклом: тёплый графит расширения */
  --scene-1: oklch(0.18 0.006 60);
  --scene-2: oklch(0.16 0.006 60);
  --scene-3: oklch(0.22 0.006 60);
  --scene-dark: oklch(0.14 0.006 60);

  /* Стекло: тёмное, фон почти не просвечивает (сцена уже графитовая) */
  --glass-bg: oklch(0.22 0.006 60 / 0.86);
  --surface: oklch(0.22 0.006 60);      /* карточки, поля */
  --surface-2: oklch(0.27 0.007 60);    /* приподнятые поверхности */
  --surface-hover: oklch(0.27 0.007 60);
  --line: oklch(0.30 0.006 60);         /* hairline */
  --line-strong: oklch(0.38 0.007 60);
  --inset: inset 0 1px 0 oklch(1 0 0 / 0.05);

  /* Акцент — тёплый почти-белый (primary-кнопка, как Build в расширении) */
  --accent: oklch(0.93 0.012 75);
  --accent-hover: oklch(0.97 0.01 75);
  --accent-ink: oklch(0.20 0.006 60);   /* текст на акценте */
  /* Тёплый персик — точечный акцент: фокус, активные намёки, бейджи. Не для фонов. */
  --accent-warm: oklch(0.82 0.10 55);
  --focus: oklch(0.82 0.10 55);         /* кольцо фокуса — единый штрих с полями расширения */

  /* Семантика статусов (приглушённая, как в расширении) */
  --ok: oklch(0.74 0.06 150);
  --danger: oklch(0.72 0.08 30);

  /* --- Типографика — Manrope везде (как расширение) --- */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", 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: 18px;
  --r-md: 14px;
  --r-pill: 999px;

  /* --- Тени: double-bezel расширения --- */
  --bezel: inset 0 1px 0 oklch(1 0 0 / 0.05);
  --shadow-amb: 0 2px 4px oklch(0 0 0 / 0.25), 0 12px 32px oklch(0 0 0 / 0.30);
  --shadow-lift: 0 12px 40px oklch(0 0 0 / 0.50);

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

  /* --- Ритм и движение (как расширение) --- */
  --gap: 1.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* экспоненциальный ease-out, без отскока */
  --dur: 0.16s;
  --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(36rem 40rem at 78% 12%, oklch(0.82 0.10 55 / 0.06), transparent 60%),
    radial-gradient(28rem 32rem at 12% 88%, oklch(0.82 0.10 55 / 0.05), transparent 62%),
    linear-gradient(155deg, var(--scene-1), var(--scene-2));
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

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; }
}