/*
  Changelog theme, styled to resemble the main frontend.
  Keep it dependency-free (no bundler/fonts).
*/

:root {
  /* Tokens mirrored from frontend/src/assets/theme-tokens.css */
  --color-primary: #1f3c6d;
  --color-accent: #f29720;

  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-text-regular: #3a3c44;
  --color-text-subtle-warm: #6a6d77;
  --color-border: #dcdfe6;

  --color-header-fg: #d3d3d3;
  --color-header-tag-bg: #5a6268;
  --color-header-tagline: #b0b0b0;

  --shadow-1: 0 1px 2px rgba(35, 38, 50, 0.06), 0 6px 20px rgba(35, 38, 50, 0.04);
  --radius-md: 12px;

  --maxw: 980px;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-regular);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial,
    sans-serif;
}

/* Layout wrappers */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
}

.header {
  background: var(--color-primary);
  color: var(--color-header-fg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__tag {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 18px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--color-header-tag-bg);
  color: var(--color-accent);
}

.brand__tagline {
  font-weight: 700;
  color: var(--color-header-tagline);
  white-space: nowrap;
}



main {
  flex: 1;
}

.main__inner {
  padding: 18px 20px 24px;
}

a {
  color: var(--color-text-regular);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.muted {
  color: var(--color-text-subtle-warm);
}

.release-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.release-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.release-meta {
  font-size: 14px;
}

.content :is(h1, h2, h3) {
  margin-top: 1.1em;
}

.content pre {
  overflow: auto;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
}

.content code {
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(220, 223, 230, 0.35);
  border: 1px solid var(--color-border);
}

ul {
  margin: 8px 0 0;
}

/* Footer (mirrors FooterUI.vue styling) */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px 28px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.footer__nav a {
  font-size: 13px;
  color: var(--color-text-subtle-warm);
  text-decoration: none;
}

.footer__nav a:hover {
  color: var(--color-text-regular);
  text-decoration: underline;
}

.footer__copy {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-text-subtle-warm);
}

@media (max-width: 720px) {
  .header__inner {
    padding: 12px 16px;
  }
  .brand__tagline {
    display: none;
  }
  .main__inner {
    padding: 14px 16px 22px;
  }
  .footer {
    padding: 14px 16px 22px;
  }
}