/* Kenku — design tokens
 * Architecture: all colors live on :root and [data-theme]; themes swap via
 * `document.documentElement.dataset.theme` with no reload.
 * No #000 / #fff anywhere; every neutral is tinted toward the family hue (sliv 320).
 * OKLCH-first; chroma drops near lightness extremes to avoid neon edges.
 */

:root,
:root[data-theme="day"] {
  /* Surface ladder. `bg` carries 50-60% of viewport; this is the committed color. */
  --bg:           oklch(94% 0.018 70);          /* warm linen, not parchment-brown */
  --surface:      oklch(97% 0.012 70);          /* card / inset, lifts toward white-cream */
  --surface-sunk: oklch(91% 0.022 70);          /* sunken (input, code, tray) */
  --surface-ink:  oklch(22% 0.030 320);         /* inverse panels (hero plate, footer) */

  /* Text */
  --fg:           oklch(22% 0.030 320);         /* ink-plum, never pure black */
  --fg-soft:      oklch(38% 0.026 320);
  --muted:        oklch(50% 0.021 320);          /* 50% (was 52%): muted/surface-sunk → ≥4.5 WCAG AA */
  --on-ink:       oklch(94% 0.020 70);          /* text sitting on --surface-ink */
  --on-ink-soft:  oklch(78% 0.022 70);

  /* Lines / borders */
  --border:       oklch(85% 0.018 70);
  --border-strong:oklch(70% 0.024 70);
  --border-ink:   oklch(34% 0.028 320);

  /* The single committed accent. Used at most twice per viewport.
   * Amber-gold of a book gilt-edge, not casino-neon. */
  --accent:       oklch(72% 0.155 70);
  --accent-strong:oklch(61% 0.170 64);           /* 61% (was 64%): gold/bg → ≥3.0 для крупного текста */
  --accent-soft:  oklch(88% 0.080 75);
  --on-accent:    oklch(20% 0.020 70);

  /* Drama tokens — used only in product moments (level-up, crit, death save).
   * Not decorative; do not bleed into chrome. */
  --crit:         oklch(78% 0.180 75);          /* nat-20 glow */
  --danger:       oklch(56% 0.170 25);          /* spáce damage / death save fail */

  /* Typography */
  --font-display: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-eyebrow: clamp(11px, 0.72vw, 13px);
  --fs-body:    clamp(15.5px, 1.05vw, 17px);
  --fs-body-lg: clamp(17px, 1.18vw, 19px);
  --fs-h4:      clamp(19px, 1.4vw, 22px);
  --fs-h3:      clamp(24px, 1.9vw, 30px);
  --fs-h2:      clamp(28px, 2.8vw, 46px);
  --fs-h1:      clamp(44px, 5.6vw, 92px);

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-body:   1.55;
  --lh-loose:  1.72;

  --tracking-tight: -0.022em;
  --tracking-body:  -0.005em;
  --tracking-mono:   0.02em;
  --tracking-eyebrow:0.14em;

  /* Spacing — base-4, but irregular by design (avoid monotone padding). */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  44px;
  --s-9:  64px;
  --s-10: 96px;
  --s-11: 132px;

  /* Radii — book-edge soft, never pill. */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);            /* ease-out-quart */
  --ease-out-deep: cubic-bezier(0.16, 1, 0.30, 1);            /* ease-out-expo */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --dur-5: 900ms;

  /* Layout */
  --measure: 66ch;
  --shell:   1180px;
  --gutter:  clamp(20px, 4vw, 56px);

  color-scheme: light;
}

/* light — cooler, whiter, for daytime users who find day too warm */
:root[data-theme="light"] {
  --bg:           oklch(97% 0.008 80);
  --surface:      oklch(100% 0 0);
  --surface-sunk: oklch(94% 0.012 80);
  --surface-ink:  oklch(22% 0.030 320);

  --fg:           oklch(20% 0.020 320);
  --fg-soft:      oklch(36% 0.018 320);
  --muted:        oklch(50% 0.014 320);

  --border:       oklch(89% 0.010 80);
  --border-strong:oklch(74% 0.014 80);

  --accent:       oklch(68% 0.150 65);
  --accent-strong:oklch(60% 0.160 60);
  --accent-soft:  oklch(92% 0.060 70);

  color-scheme: light;
}

/* dark — inverted, but warm. Plum-ink ground, linen ink. Same gold accent. */
:root[data-theme="dark"] {
  --bg:           oklch(18% 0.030 320);
  --surface:      oklch(22% 0.032 320);
  --surface-sunk: oklch(15% 0.024 320);
  --surface-ink:  oklch(12% 0.020 320);

  --fg:           oklch(93% 0.018 70);
  --fg-soft:      oklch(80% 0.020 70);
  --muted:        oklch(64% 0.022 70);
  --on-ink:       oklch(93% 0.018 70);
  --on-ink-soft:  oklch(76% 0.020 70);

  --border:       oklch(32% 0.030 320);
  --border-strong:oklch(46% 0.034 320);
  --border-ink:   oklch(40% 0.030 320);

  --accent:       oklch(78% 0.155 72);
  --accent-strong:oklch(82% 0.160 75);
  --accent-soft:  oklch(34% 0.060 70);
  --on-accent:    oklch(18% 0.022 70);

  --crit:         oklch(82% 0.180 75);
  --danger:       oklch(64% 0.180 25);

  color-scheme: dark;
}

/* ---------- Reset, just enough ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Mobile guard: ни одна широкая строка (топнав, таблица, заголовок) не должна
     уводить весь документ в горизонтальный скролл. Якорь к viewport, sticky-шапка
     продолжает работать (html — корневой скролл-контейнер). (kenku-9pjl) */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  text-wrap: pretty;
  transition: background-color var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-variation-settings: "opsz" 144; font-weight: 420; }
h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 72; }
h3 { font-size: var(--fs-h3); font-variation-settings: "opsz" 36; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0; max-width: var(--measure); }

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

img, svg, video { display: block; max-width: 100%; height: auto; }

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

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Eyebrow / mono / numerics */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
  font-weight: 500;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Shell + section rhythm ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-10);
  position: relative;
}
.section + .section { border-top: 1px solid var(--border); }
.section.sunk      { background: var(--surface-sunk); }
.section.ink       { background: var(--surface-ink); color: var(--on-ink); }
.section.ink .eyebrow, .section.ink .muted { color: var(--on-ink-soft); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-7) var(--s-9);
  align-items: end;
  margin-bottom: var(--s-9);
}
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-5); }
  .section { padding-block: var(--s-9); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: var(--fs-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-strong);
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-secondary {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--fg); }

.btn-ghost {
  color: var(--fg-soft);
  padding: 10px 14px;
}
.btn-ghost:hover { color: var(--fg); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .arrow {
  width: 14px; height: 14px;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Tag / pill ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--fg-soft);
  background: transparent;
}
.tag.solid {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--fg);
}

/* ---------- Промо-цена (динамический каталог) ---------- */
/* applyCatalog() вставляет зачёркнутую старую цену + бейдж скидки в [data-price]. */
.price-was {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.82em;
  margin-right: 4px;
}
.price-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

/* ---------- Topnav ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* kenku-xhe9 (#7): frosted-фон вместо просто полупрозрачного — тёмный
     sticky-лоток демо больше не просвечивает сквозь шапку при скролле. */
  background: color-mix(in oklch, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
/* Если backdrop-filter не поддержан — фон делаем плотным, чтобы не было bleed. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topnav { background: var(--bg); }
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  font-variation-settings: "opsz" 36;
}
.brand-mark {
  width: 28px; height: 28px;
  color: var(--accent-strong);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  padding: 0; margin: 0;
}
.nav-links a {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--fg); }

/* Topnav — responsive collapse.
 * Лендинг — одностраничный скролл; на узких вьюпортах внутристраничные якоря и
 * переключатель тем сворачиваются, чтобы бренд + вход (TG-виджет ~186px) ни на
 * одной ширине не уезжали в горизонтальный скролл. Порог якорей — 1024px: на
 * этой ширине строка ещё помещается с полным CTA, ниже — уже нет. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .topnav .theme-switch { display: none; }
  .topnav-inner { gap: var(--s-3); }
  /* «Войти без аккаунта» в шапке дублирует hero-CTA «Открыть Kenku» — на узких
     экранах оставляем только TG-виджет, чтобы строка не уходила в горизонтальный
     скролл (порог поднят 460→600: ниже 600 шапка не вмещала обе кнопки). */
  .auth-slot[data-state="guest"] [data-auth-guest] { display: none; }
  /* Залогиненное состояние: аватар + «Открыть Kenku» — ядро. Приветствие и
     «Выйти» прячем, иначе четыре элемента не помещаются на телефоне. */
  .auth-user .name,
  .auth-user .logout { display: none; }
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.theme-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.theme-switch button {
  width: 28px; height: 28px;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.theme-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--fg) 7%, transparent);
}
.theme-switch svg { width: 14px; height: 14px; }

/* ---------- Reveal (IntersectionObserver) ----------
 * Progressive enhancement: content is visible by default. The hidden
 * pre-animation state is applied ONLY when the root carries `.js-reveal`,
 * which the inline bootstrap sets synchronously before paint. If scripts are
 * blocked (sandboxed preview, CSP, offline), nothing is ever hidden. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out-deep),
    transform 700ms var(--ease-out-deep);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------- prefers-reduced-motion kill-switch ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}