/* valheim — valheim.top: forest-shadow greens, bronze accents, rune-inspired
   serif headings. */
@import url('../fonts/inter/index.css');  /* Inter */
@import url('../fonts/cinzel/index.css');  /* Cinzel */

:root {
  --bg: #0c120f;
  --surface: #132018;
  --text: #edf3ea;
  --muted: #a4b3a7;
  --accent: #d0a24c;
  --accent-contrast: #0c120f;
  --border: #294133;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Cinzel', Georgia, serif;
  --radius: 14px;
  --header-bg: rgba(9, 15, 12, 0.86);
  --header-text: #f8f4e6;
  --shadow-color: rgba(0, 0, 0, 0.45);
}

/* The one preset in the fleet with a translucent header, and therefore the
   only one where a backdrop blur does anything. site.css used to apply it
   unconditionally, which meant nine sites promoted a compositing layer to
   blur an opaque colour. */
.site-header { backdrop-filter: blur(14px); }

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(74, 133, 93, 0.22), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(208, 162, 76, 0.16), transparent 26%),
    linear-gradient(180deg, #101915 0%, #0c120f 100%);
  background-attachment: fixed;
}

.site-title { letter-spacing: 0.08em; text-transform: uppercase; }
.site-tagline { color: #b8c4b6; }

/* Cinzel is all-caps by design and needs air between the letters at heading
   sizes; the shared -0.02em display tracking is drawn for lowercase. */
.article-title, .hero-title, .card-title { letter-spacing: 0.01em; }

/* Bronze plate rather than plain text — the one place this preset spends its
   accent on fill instead of a rule. */
.card-category, .eyebrow {
  background: rgba(208, 162, 76, 0.16);
  border: 1px solid rgba(208, 162, 76, 0.28);
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
}

/* Photographs sit on a near-black page; a hairline stops them bleeding into it. */
.hero-image,
.card-image,
.article-hero img { border: 1px solid rgba(255, 255, 255, 0.08); }