/* ═══════════════════════════════════════════════════════════════════
   TeamFox Design System – Theme Layer
   Änderungen hier gelten für die gesamte App.
   Für andere Vereine: nur diese Datei anpassen.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Vereinsfarben (Primär) ──────────────────────────────────────── */
  --club-900: #0a2e18;   /* dunkelster Ton, Schatten */
  --club-800: #0f4c2a;   /* Navbar, Header */
  --club-700: #156334;   /* Hover-Zustand */
  --club-600: #1a7a3e;   /* Links, Borders */
  --club-500: #22a055;   /* Primärfarbe, Buttons */
  --club-400: #4fc878;   /* Icons, Badges */
  --club-100: #e6f9ee;   /* Heller Hintergrund */
  --club-50:  #f0fdf6;   /* Allerhellerster Ton */

  /* ── Vereinsfarben (Sekundär) ────────────────────────────────────── */
  --club-accent: #fbbf24;     /* Akzentfarbe (Gold/Gelb) */
  --club-accent-dark: #b45309;

  /* ── Vereinsidentität ────────────────────────────────────────────── */
  --club-name: "FC Forstern";
  --club-logo: "/static/logo.png";
  --club-logo-size: 36px;

  /* ── Backwards-Compat: alte --fc-* Variablen ────────────────────── */
  --fc-900: var(--club-900);
  --fc-800: var(--club-800);
  --fc-700: var(--club-700);
  --fc-600: var(--club-600);
  --fc-500: var(--club-500);
  --fc-400: var(--club-400);
  --fc-100: var(--club-100);

  /* ── Semantische Tokens ──────────────────────────────────────────── */
  --color-primary:        var(--club-500);
  --color-primary-dark:   var(--club-700);
  --color-primary-light:  var(--club-100);
  --color-navbar-bg:      var(--club-800);
  --color-navbar-text:    #ffffff;
  --color-link:           var(--club-600);
  --color-focus-ring:     var(--club-400);

  /* ── Komponenten-Tokens ──────────────────────────────────────────── */
  --btn-primary-bg:       var(--club-500);
  --btn-primary-hover:    var(--club-700);
  --btn-primary-text:     #ffffff;
  --card-header-bg:       var(--club-800);
  --card-header-text:     #ffffff;
  --badge-primary-bg:     var(--club-100);
  --badge-primary-text:   var(--club-800);

  /* ── Spacing & Layout ────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.1);

  /* ── Typografie ──────────────────────────────────────────────────── */
  --font-base:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', monospace;
  --text-xs:      .72rem;
  --text-sm:      .82rem;
  --text-base:    .9rem;
  --text-lg:      1rem;
  --text-xl:      1.15rem;
}

/* ── Dark Mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-navbar-bg:     var(--club-900);
    --card-header-bg:      var(--club-900);
  }
}

/* ── Bootstrap Overrides mit Club-Farben ─────────────────────────── */
.btn-fc,
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  border-color:     var(--btn-primary-bg) !important;
  color:            var(--btn-primary-text) !important;
}
.btn-fc:hover,
.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
  border-color:     var(--btn-primary-hover) !important;
}

/* ── Card-Header ─────────────────────────────────────────────────── */
.card-header-fc {
  background: var(--card-header-bg);
  color:      var(--card-header-text);
  padding:    10px 16px;
  font-size:  var(--text-sm);
}

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar-fc {
  background: var(--color-navbar-bg) !important;
}

/* ── Touch-Button (min. 44px Klickfläche für Mobile) ────────────── */
.touch-btn {
  min-height: 44px;
  min-width:  44px;
}

/* ── Utility-Klassen ─────────────────────────────────────────────── */
.text-club     { color: var(--color-primary); }
.bg-club       { background: var(--color-primary); }
.bg-club-light { background: var(--color-primary-light); }
.border-club   { border-color: var(--color-primary) !important; }

/* ── Fokus-Ring (Barrierefreiheit) ───────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}