/* Shared public-site tokens, aligned with barabei-frontend/src/constants/theme.ts. */
:root {
  color-scheme: light dark;
  --text: #14201b;
  --heading: #14201b;
  --background: #fbfcfd;
  --surface: #f1f5f3;
  --card: #ffffff;
  --muted: #5f6f68;
  --border: #d7e2dc;
  --primary: #157a58;
  --primary-dark: #0f5138;
  --button: #0f5138;
  --info-bg: #dff5ea;
  --soft-text: #0f6645;
  --warning-bg: #fff1cf;
  --warning-text: #835600;
  --error: #b42318;
  --shadow: 0 8px 32px rgb(15 81 56 / 7%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f4f7f5;
    --heading: #f4f7f5;
    --background: #0c1110;
    --surface: #171f1c;
    --card: #111815;
    --muted: #aeb8b2;
    --border: #30413a;
    --primary: #65d695;
    --primary-dark: #9ee8ba;
    --button: #1d6b45;
    --info-bg: #173625;
    --soft-text: #9ee8ba;
    --warning-bg: #3a2d13;
    --warning-text: #ffd98a;
    --error: #ff9b90;
    --shadow: 0 8px 32px rgb(101 214 149 / 5%);
  }
}

body {
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  overflow-wrap: break-word;
}
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
::selection { background: var(--info-bg); color: var(--soft-text); }
.logo, .logo a, .footer-brand { color: var(--primary); }
.button, button, input { border-radius: 14px; min-height: 48px; font: inherit; }
.button, button { font-weight: 700; transition: background-color 160ms ease, box-shadow 160ms ease; }
.button-primary, .page-delete-account button {
  background: var(--button);
  color: #ffffff;
}
.button-primary:hover, .page-delete-account button:hover:not(:disabled) {
  background: var(--button);
  box-shadow: 0 0 0 4px var(--info-bg);
  color: #ffffff;
}
.button-secondary { background: var(--surface); border-color: var(--border); color: var(--primary); }
.button-secondary:hover { background: var(--info-bg); }
.card, .feature { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.page-home header {
  margin: 16px auto 0;
  width: calc(100% - 32px);
  max-width: 1100px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.navbar { min-height: 72px; height: auto; gap: 16px; padding: 8px 0; }
.nav-links { flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 48px; }
.hero { background: radial-gradient(ellipse at 50% 20%, var(--info-bg), transparent 70%); }
.hero h1 { letter-spacing: -0.045em; line-height: 1.12; }
.features { border-color: var(--border); }
.feature { background: var(--surface); }
.feature-number { width: 48px; height: 48px; background: var(--info-bg); color: var(--soft-text); }
.cta { background: var(--info-bg); color: var(--text); border: 1px solid var(--border); border-radius: 24px; }
.cta p { color: var(--muted); }
.cta .button { background: var(--button); color: #ffffff; }
.cta .button:hover { background: var(--button); box-shadow: 0 0 0 4px var(--border); }
.page-policy header { background: var(--info-bg); color: var(--text); border-bottom: 1px solid var(--border); }
.page-policy .info-box, .page-policy .contact-box { border-radius: 14px; }
.page-policy a { text-underline-offset: 4px; }
.page-delete-account { padding: 32px 16px; }
.page-delete-account .logo a { text-decoration: none; }
.page-delete-account input { background: var(--card); color: var(--text); border-color: var(--border); }
.page-delete-account input:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.page-delete-account input::placeholder { color: var(--muted); }
.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text); border-radius: 14px; }
.message.success { background: var(--info-bg); color: var(--soft-text); border-color: var(--border); }
.message.error { background: var(--surface); color: var(--error); border-color: var(--error); }
.footer a, .footer-links a { display: inline-flex; align-items: center; min-height: 48px; }
@media (max-width: 700px) {
  .navbar { align-items: center; }
  .hero { padding: 64px 0; }
  .features { padding: 48px 0 64px; }
  .cta { padding: 32px 24px; margin-bottom: 48px; }
}
@media (max-width: 450px) {
  .page-home header .container { padding: 0 16px; }
  .nav-links { gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, button { transition: none; }
}