/* ============================================================
   Lütt Huus — design tokens
   Almost-monochrome with a single coastal accent.
   Type pairing: Inter (UI) + Newsreader (display, editorial serif).
   ============================================================ */

:root {
  /* neutrals — warm, slightly toned */
  --paper: oklch(0.985 0.005 90);
  --paper-dim: oklch(0.965 0.006 90);
  --line: oklch(0.88 0.008 90);
  --line-soft: oklch(0.93 0.006 90);
  --ink: oklch(0.22 0.015 250);
  --ink-soft: oklch(0.42 0.012 250);
  --ink-mute: oklch(0.58 0.01 250);

  /* accents — swappable via Tweaks */
  --accent-sage: oklch(0.62 0.045 155);   /* matches the Visitenkarte logo */
  --accent-baltic: oklch(0.55 0.07 230);  /* deeper Ostsee blue */
  --accent-northsea: oklch(0.62 0.035 220); /* greyed northsea */
  --accent-sand: oklch(0.78 0.055 80);    /* dune */
  --accent-rust: oklch(0.58 0.10 45);     /* roof tile */

  --accent: var(--accent-sage);
  --accent-ink: oklch(0.32 0.04 155);

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* radii */
  --r-1: 2px; --r-2: 6px; --r-3: 12px; --r-4: 24px;

  /* container widths */
  --w-page: 1240px;
  --w-prose: 640px;
}

* { box-sizing: border-box; min-width: 0; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, iframe { max-width: 100%; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* type system */
.t-eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-soft);
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.t-h1 { font-size: clamp(40px, 6.2vw, 88px); }
.t-h2 { font-size: clamp(30px, 4.2vw, 56px); }
.t-h3 { font-size: clamp(22px, 2.4vw, 32px); }
.t-lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 60ch;
}
.t-body { font-size: 16px; color: var(--ink-soft); }
.t-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }

/* utility */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.container { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 600px) { .container { padding: 0 var(--s-5); } }
@media (min-width: 880px) { .container { padding: 0 var(--s-7); } }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  text-decoration: none; font-weight: 500; font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: white; }

/* selection */
::selection { background: var(--accent); color: white; }