/*
  brand.css: the one place for Vama Arendus colours, type and easing. Loaded after the kit (system.css) by every page,
  so index, /paps and 404 read from the same tokens. Change a colour here and all three pages follow.
*/
:root {
  /* paper, ink and one deep sea-green accent; the inverse set is the hero's navy */
  --accent: #1f6b57; --accent-hover: #185646; --accent-ink: #ffffff;
  --p-bg: #f5f2ec; --p-surface: #ebe6dd; --p-ink: #141414; --p-muted: #6a655e;
  --p-accent: var(--accent); --p-accent-ink: var(--accent-ink); --p-action: var(--accent); --p-action-ink: var(--accent-ink);
  --p-inv-bg: #0f1726; --p-inv-surface: #182238; --p-inv-ink: #f5f2ec; --p-inv-muted: #b7bdc9;
  --p-inv-accent: #f5f2ec; --p-inv-accent-ink: #0f1726; --p-inv-action: #f5f2ec; --p-inv-action-ink: #0f1726;
  --line: rgb(20 20 20 / .12); --line-strong: rgb(20 20 20 / .28);
  --font-display: "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.03em;
  --display-tracking-xl: -0.035em;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ly-scale: 0.98;
}
body { font-size: 17px; }
p { max-width: 60ch; }
/* the mark and the name, as the header shows them on every page */
.nav__logo { display: inline-flex; align-items: center; gap: 12px; color: inherit; font: 400 20px/1 var(--font-display); letter-spacing: -0.02em; }
.nav__logo .v-mark { width: 34px; height: auto; display: block; color: inherit; background: none; border-radius: 0; }
@media (max-width: 639px) { .nav__logo { font-size: 18px; gap: 10px; } .nav__logo .v-mark { width: 28px; } }