/* ==========================================================================
   kryptoexperte.de — Designsystem
   Warmes Grün · freundlich-rund · zugänglich
   ========================================================================== */

:root {
  /* --- Markenfarben (warmes Grün) --- */
  --green-50:  oklch(0.97 0.02 158);
  --green-100: oklch(0.94 0.04 158);
  --green-200: oklch(0.88 0.07 158);
  --green-400: oklch(0.72 0.12 158);
  --green-500: oklch(0.64 0.13 158);
  --green-600: oklch(0.575 0.125 158);   /* Primär ~ #1f8a5b */
  --green-700: oklch(0.49 0.105 159);
  --green-900: oklch(0.34 0.06 160);      /* Tannengrün ~ #0e3d2a */
  --green-950: oklch(0.27 0.045 162);

  /* --- Warme Neutraltöne --- */
  --paper:   oklch(0.99 0.006 95);        /* warmes Off-White Hintergrund */
  --surface: oklch(1 0 0);                /* Karten */
  --sand:    oklch(0.965 0.012 92);       /* sanfte Sektionsfläche */
  --line:    oklch(0.915 0.01 110);       /* Rahmen */
  --line-strong: oklch(0.86 0.012 110);

  --ink:      oklch(0.265 0.012 160);     /* Haupttext, warmes fast-Schwarz */
  --ink-soft: oklch(0.45 0.012 150);      /* Sekundärtext */
  --ink-mute: oklch(0.6 0.01 150);        /* Tertiär */

  /* --- Akzent (warm, sparsam) --- */
  --honey: oklch(0.8 0.11 75);

  /* --- Kategorie-Farbton wird per --cat-hue gesetzt --- */
  --cat-hue: 158;
  --cat-bg:   oklch(0.96 0.035 var(--cat-hue));
  --cat-fg:   oklch(0.45 0.09 var(--cat-hue));
  --cat-dot:  oklch(0.62 0.13 var(--cat-hue));

  /* --- Radius & Schatten (rund & weich) --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(0.4 0.03 160 / 0.06), 0 1px 3px oklch(0.4 0.03 160 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.4 0.03 160 / 0.07), 0 2px 6px oklch(0.4 0.03 160 / 0.05);
  --shadow-lg: 0 18px 48px oklch(0.35 0.04 160 / 0.13), 0 6px 16px oklch(0.35 0.04 160 / 0.08);

  /* --- Typo --- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --maxw: 1180px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--green-950);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--green-200); }

/* --- Container --- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  padding: 13px 22px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-700); box-shadow: var(--shadow-md); }
.btn-ghost { background: var(--surface); color: var(--green-900); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--green-400); color: var(--green-700); }

/* --- Badges / Level --- */
.lvl {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  padding: 4px 11px; border-radius: var(--r-pill); letter-spacing: 0.01em;
}
.lvl-dot { width: 7px; height: 7px; border-radius: 50%; }
.lvl-1 { background: oklch(0.95 0.04 158); color: oklch(0.45 0.1 158); }
.lvl-1 .lvl-dot { background: oklch(0.62 0.14 158); }
.lvl-2 { background: oklch(0.96 0.045 75); color: oklch(0.48 0.1 65); }
.lvl-2 .lvl-dot { background: oklch(0.72 0.13 70); }
.lvl-3 { background: oklch(0.95 0.035 25); color: oklch(0.5 0.13 25); }
.lvl-3 .lvl-dot { background: oklch(0.62 0.16 25); }

/* --- Kategorie-Chip --- */
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--cat-bg); color: var(--cat-fg);
  border: 1px solid transparent;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-dot); flex: none; }

/* utility */
.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}