/**
 * До загрузки Tailwind: фон страницы и цвета марка/ссылок в шапке
 * (иначе SVG с currentColor внутри <a> даёт системный синий).
 * См. apps/brew_notes/branding — те же токены, что в приложении.
 */
:root {
  --hn-brand: #4f772d;
  --hn-brand-light: #90a955;
  --hn-page-bg: #fafaf9;
  --hn-page-bg-dark: #0c0a09;
  --hn-nav-muted: #57534e;
}

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

html.dark {
  background-color: var(--hn-page-bg-dark);
  color-scheme: dark;
}

/* Fallback: фон body (утилита bg-[#FAFAF9] раньше перекрывала dark:bg-* из‑за специфичности) */
html.dark body {
  background-color: var(--hn-page-bg-dark);
}

/* Марк в шапке — hop-nav-mark.svg (Figma icon_app), цвет внутри файла */

a.hopnote-nav-home span.hopnote-wordmark {
  color: #1c1917;
}

html.dark a.hopnote-nav-home span.hopnote-wordmark {
  color: #fafaf9;
}

a.hopnote-nav-muted {
  color: var(--hn-nav-muted);
  text-decoration: none;
}

a.hopnote-nav-cta {
  background-color: var(--hn-brand);
  color: #fff;
  text-decoration: none;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
}

a.hopnote-back-link {
  color: var(--hn-brand);
  text-decoration: none;
}

a.hopnote-back-link:hover {
  text-decoration: underline;
}

a.hopnote-lang-link {
  color: #78716c;
  text-decoration: none;
}

html.dark a.hopnote-lang-link {
  color: #a8a29e;
}

/* Полноэкранный сплэш (как flutter_native_splash: light #fff / dark #1E3C2E + splash_icon) */
html.hopnote-splash-lock,
html.hopnote-splash-lock body {
  overflow: hidden;
  height: 100%;
}

.hopnote-page-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  background-color: #ffffff;
  transition:
    opacity 0.36s ease,
    visibility 0.36s ease;
}

html.dark .hopnote-page-splash {
  background-color: #1e3c2e;
}

.hopnote-page-splash img {
  display: block;
  width: min(128px, 36vw);
  height: auto;
  max-height: min(128px, 28vh);
  object-fit: contain;
}

.hopnote-page-splash.hopnote-page-splash--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hopnote-page-splash {
    transition-duration: 0.01ms;
  }
}