/* ============================================================
   gogerman — shared design system
   Modern & confident · clean sans · one fresh-green accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,16..72,400;0,16..72,500;1,16..72,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* ---- accent (fresh green) ---- */
  --accent-h: 150;
  --accent:        oklch(0.66 0.15 var(--accent-h));
  --accent-strong: oklch(0.57 0.16 var(--accent-h));
  --accent-press:  oklch(0.49 0.15 var(--accent-h));
  --accent-soft:   oklch(0.955 0.045 var(--accent-h));
  --accent-tint:   oklch(0.975 0.022 var(--accent-h));
  --accent-ink:    oklch(0.40 0.10 var(--accent-h));

  /* ---- neutrals (warm-cool, faint green cast) ---- */
  --ink:   oklch(0.24 0.012 165);
  --ink-2: oklch(0.44 0.014 165);
  --ink-3: oklch(0.58 0.011 165);
  --line:  oklch(0.912 0.008 165);
  --line-2:oklch(0.952 0.006 165);
  --bg:    oklch(0.984 0.006 150);
  --surface: #ffffff;
  --surface-2: oklch(0.974 0.008 150);

  /* ---- article genders (der/die/das) ---- */
  --der:      oklch(0.55 0.13 252);
  --der-soft: oklch(0.955 0.035 252);
  --die:      oklch(0.58 0.16 14);
  --die-soft: oklch(0.955 0.04 14);
  --das:      oklch(0.55 0.115 162);
  --das-soft: oklch(0.955 0.038 162);

  --amber:      oklch(0.70 0.12 70);
  --amber-soft: oklch(0.955 0.05 75);

  /* ---- type ---- */
  --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- radii ---- */
  --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- shadows ---- */
  --shadow-sm: 0 1px 2px rgba(22,40,30,.05), 0 1px 3px rgba(22,40,30,.04);
  --shadow:    0 4px 16px rgba(22,45,32,.06), 0 2px 5px rgba(22,45,32,.04);
  --shadow-lg: 0 22px 60px rgba(20,48,36,.13), 0 8px 20px rgba(20,48,36,.06);
  --shadow-accent: 0 10px 26px oklch(0.66 0.15 var(--accent-h) / .28);

  --maxw: 1140px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- shared atoms ---------- */

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 500;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height:1;
  padding: .92rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover{ background: var(--accent-strong); }

.btn-ghost{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover{ border-color: oklch(0.85 0.01 165); background: var(--surface-2); }

.btn-lg{ padding: 1.05rem 1.7rem; font-size: 1.06rem; border-radius: var(--r); }
.btn-block{ width:100%; }

.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.74rem; font-weight:600;
  padding:.28rem .6rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border:1px solid var(--line);
}
.pill-accent{ background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* gender chips */
.gtag{ font-family: var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.04em; padding:.22rem .5rem; border-radius:6px; }
.gtag[data-g="der"]{ background:var(--der-soft); color:var(--der); }
.gtag[data-g="die"]{ background:var(--die-soft); color:var(--die); }
.gtag[data-g="das"]{ background:var(--das-soft); color:var(--das); }

/* brand wordmark */
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.02em; font-size:1.12rem; color:var(--ink); }
.brand-tld{ color:var(--ink-3); font-weight:700; margin-left:-.02em; }
.brand-mark{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background: var(--accent);
  display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1rem;
  box-shadow: var(--shadow-accent);
}

.container{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

/* visually hidden */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }