/* ============================================================
   HAFA · WM 2026 Aktion — Design System
   Pitch-green + chalk-white + trophy-gold, HAFA charcoal ink.
   ============================================================ */

:root {
  /* Brand greens (football pitch) */
  --pitch-950: #062f17;
  --pitch-900: #0a4a24;
  --pitch-800: #0c5a2c;
  --pitch-700: #0e6a34;
  --pitch-600: #128240;   /* HAFA grass primary */
  --pitch-500: #1a9a4c;
  --pitch-300: #6fc78c;
  --pitch-100: #d7efdf;

  /* Trophy / WM accents */
  --gold-600: #d99c12;
  --gold-500: #f0b429;
  --gold-400: #f6c84c;
  --gold-100: #fdf1cf;

  /* Sport red — used sparingly */
  --red-600: #d8392b;
  --red-100: #fbe2df;

  /* Ink / neutrals (HAFA charcoal) */
  --ink: #14181a;
  --ink-800: #232a2c;
  --ink-600: #46524d;
  --muted: #6d7b73;
  --muted-2: #93a097;
  --hair: #e3e9e3;
  --hair-2: #eef2ec;
  --stone: #eef2ec;       /* app background */
  --stone-2: #f6f8f5;
  --card: #ffffff;

  /* Status */
  --st-new: #3268d6;
  --st-new-bg: #e6eefb;
  --st-ok: #14903f;
  --st-ok-bg: #dff3e4;
  --st-rej: #c8362a;
  --st-rej-bg: #fbe5e2;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(13,40,24,.06), 0 1px 3px rgba(13,40,24,.05);
  --sh-md: 0 4px 14px rgba(13,40,24,.08), 0 2px 5px rgba(13,40,24,.05);
  --sh-lg: 0 18px 44px rgba(8,40,22,.16), 0 6px 16px rgba(8,40,22,.08);
  --sh-gold: 0 6px 18px rgba(216,156,18,.34);
  --sh-green: 0 8px 20px rgba(10,74,36,.26);

  --ff-display: 'Archivo', system-ui, sans-serif;
  --ff-body: 'Archivo', system-ui, sans-serif;
  --ff-jersey: 'Barlow Condensed', system-ui, sans-serif;

  /* WM-intensity (0 dezent .. 1 energiegeladen) — driven by tweak */
  --wm: 0.62;
}

* { box-sizing: border-box; }

/* ---------- Typography ---------- */
.h-display {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
}
.h-title { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.04; }
.eyebrow {
  font-family: var(--ff-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 12px;
}
.jersey { font-family: var(--ff-jersey); font-weight: 700; font-variant-numeric: tabular-nums; }
.body { font-family: var(--ff-body); font-weight: 400; line-height: 1.5; color: var(--ink-600); }

/* ---------- Pitch backgrounds ---------- */
.pitch-bg {
  background:
    linear-gradient(160deg, var(--pitch-700) 0%, var(--pitch-900) 70%, var(--pitch-950) 100%);
  position: relative;
  overflow: hidden;
}
/* mowed-lawn vertical stripes — strength scales with --wm */
.pitch-stripes::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0) 0 38px,
    rgba(255,255,255,0.045) 38px 76px);
  opacity: calc(0.35 + var(--wm) * 0.65);
  pointer-events: none;
}
/* faint chalk pitch lines */
.pitch-lines::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.16) 0 1.5px, transparent 2px),
    linear-gradient(transparent 0, transparent 100%);
  pointer-events: none;
  opacity: calc(0.2 + var(--wm) * 0.5);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.005em;
  border: none; cursor: pointer;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
  text-decoration: none; white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); color: #3a2c05; box-shadow: var(--sh-gold); }
.btn-gold:hover { filter: brightness(1.04); box-shadow: 0 10px 24px rgba(216,156,18,.42); }
.btn-green { background: var(--pitch-600); color: #fff; box-shadow: var(--sh-green); }
.btn-green:hover { background: var(--pitch-700); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-800); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); }
.btn-ghost:hover { border-color: var(--muted-2); background: var(--stone-2); }
.btn-white { background: #fff; color: var(--pitch-800); box-shadow: var(--sh-sm); }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-lg { padding: 17px 28px; font-size: 18px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Chips / badges ---------- */
.chip {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px;
  line-height: 1; white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; }
.st-new { background: var(--st-new-bg); color: var(--st-new); }
.st-ok  { background: var(--st-ok-bg);  color: var(--st-ok); }
.st-rej { background: var(--st-rej-bg); color: var(--st-rej); }

.tag {
  font-family: var(--ff-body); font-weight: 600; font-size: 12px;
  color: var(--muted); background: var(--hair-2);
  border-radius: var(--r-pill); padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--hair);
}

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--ff-display); font-weight: 600; font-size: 13.5px;
  color: var(--ink-800); letter-spacing: .005em;
}
.field .req { color: var(--red-600); }
.input, .textarea, .select {
  font-family: var(--ff-body); font-size: 15px; color: var(--ink);
  background: var(--stone-2);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-md);
  padding: 12px 14px; width: 100%;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--pitch-500); background: #fff;
  box-shadow: 0 0 0 4px rgba(26,154,76,.13);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.field-hint { font-family: var(--ff-body); font-size: 12px; color: var(--muted); }
.field-error { font-family: var(--ff-body); font-size: 12.5px; color: var(--red-600); font-weight: 600; }
.input.invalid, .textarea.invalid { border-color: var(--red-600); background: #fff; }

/* checkbox */
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.check input { display: none; }
.check .box {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--muted-2); background: #fff;
  display: grid; place-items: center; transition: all .14s;
}
.check input:checked + .box { background: var(--pitch-600); border-color: var(--pitch-600); }
.check .box svg { opacity: 0; transition: opacity .12s; }
.check input:checked + .box svg { opacity: 1; }
.check .lbl { font-family: var(--ff-body); font-size: 13px; color: var(--ink-600); line-height: 1.4; }

/* ---------- Scrollbars (in-app) ---------- */
.scroll-area::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-area::-webkit-scrollbar-thumb { background: rgba(13,40,24,.18); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* utility */
.stat-num { font-family: var(--ff-jersey); font-weight: 700; line-height: .9; }
.divide { height: 1px; background: var(--hair); }
.upper { text-transform: uppercase; }