/* =====================================================================
   Design-Tokens
   =====================================================================

   Farbkonzept (docs/farbkonzept.md): Jeder Verein bringt vier Farben
   mit - Hauptfarbe, dunkle Hauptfarbe, Akzent, dunkler Akzent. Alles
   andere wird daraus abgeleitet, entweder hier ueber var() und
   Transparenz oder in ClubIdentity::css(), das die abgeleiteten Werte
   (Text, Linien, rgb-Tripel, Textfarbe auf Haupt- und Akzentfarbe) als
   Inline-<style> nach dieser Datei setzt.

   Die Werte hier sind die des Tennisclubs Zell, aus dem die Plattform
   stammt, und exakt das, was ClubIdentity::ableiten([]) liefert
   (tests/farben_test.php prueft das). Die Namen navy/lime bleiben aus
   historischen Gruenden: navy = Hauptfarbe, lime = Akzent.

   Regel fuer site.css und admin.css: keine Hex- und keine rgba-Literale
   ausser reinem Weiss mit Transparenz. Jede Farbe kommt aus einem Token.
   ===================================================================== */

:root {
  /* --- Marke (vier Eingaben) --------------------------------------- */
  --tcz-navy:          #04284A;
  --tcz-navy-dark:     #001B33;
  --tcz-lime:          #B7D900;
  --tcz-lime-dark:     #9EC000;

  /* --- Abgeleitet (ClubIdentity::ableiten) -------------------------- */
  --tcz-navy-rgb:      4, 40, 74;
  --tcz-navy-dark-rgb: 0, 27, 51;
  --tcz-lime-rgb:      183, 217, 0;
  --tcz-on-navy:       #FFFFFF;      /* Text auf der Hauptfarbe */
  --tcz-on-lime:       #001B33;      /* Text auf dem Akzent, nach Kontrast */
  --tcz-text:          #0A243D;      /* Farbton der Hauptfarbe, sehr dunkel */
  --tcz-muted:         #607385;      /* Farbton der Hauptfarbe, entsaettigt */
  --tcz-border:        #DCE3EA;
  --tcz-light:         #F7F9FB;
  --tcz-info:          var(--tcz-navy);

  /* --- Abgeleitet ueber Transparenz --------------------------------- */
  --tcz-white:         #FFFFFF;
  --tcz-tint:          rgba(var(--tcz-navy-rgb), .07);   /* zarte Flaeche in der Hauptfarbe */
  --tcz-accent-tint:   rgba(var(--tcz-lime-rgb), .12);   /* zarte Flaeche im Akzent */
  --tcz-on-dark:       rgba(255, 255, 255, .82);         /* Text auf Haupt-/dunkler Hauptfarbe */
  --tcz-on-dark-muted: rgba(255, 255, 255, .62);
  --tcz-on-dark-faint: rgba(255, 255, 255, .42);
  --tcz-on-dark-line:  rgba(255, 255, 255, .14);

  /* --- Semantisch: fest, nur fuer Zustaende, nie als Dekor ---------- */
  --tcz-success:       #2F7D32;
  --tcz-success-bg:    #EDF6EE;
  --tcz-success-text:  #1D5720;
  --tcz-warning:       #C77700;
  --tcz-warning-bg:    #FBF3E6;
  --tcz-warning-text:  #7A4A00;
  --tcz-danger:        #C0362C;
  --tcz-danger-bg:     #FBEEED;
  --tcz-danger-text:   #8C2820;
  --tcz-danger-line:   #F0D5D2;

  /* --- Radien ------------------------------------------------------- */
  --tcz-radius-sm:   8px;
  --tcz-radius-md:   16px;
  --tcz-radius-lg:   28px;
  --tcz-radius-pill: 999px;

  /* --- Schatten: Karten in der dunklen Hauptfarbe, Knoepfe im Akzent - */
  --tcz-shadow-card: 0 10px 30px rgba(var(--tcz-navy-dark-rgb), .10);
  --tcz-shadow-soft: 0 4px 14px rgba(var(--tcz-navy-dark-rgb), .08);
  --tcz-shadow-pop:  0 12px 32px rgba(var(--tcz-navy-rgb), .16);
  --tcz-shadow-btn:  0 6px 18px rgba(var(--tcz-lime-rgb), .35);
  --tcz-focus-ring:  0 0 0 3px rgba(var(--tcz-lime-rgb), .35);

  /* --- Typografie --------------------------------------------------- */
  --tcz-font-head: "Oswald", "Inter", system-ui, sans-serif;
  --tcz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --tcz-size-xs:  0.8125rem;   /* 13px */
  --tcz-size-sm:  0.9375rem;   /* 15px */
  --tcz-size-md:  1rem;        /* 16px */
  --tcz-size-lg:  1.25rem;     /* 20px */
  --tcz-size-xl:  1.75rem;     /* 28px */
  --tcz-size-2xl: 2.5rem;      /* 40px */
  --tcz-size-3xl: 3.5rem;      /* 56px */

  --tcz-lh-tight: 1.15;
  --tcz-lh-base:  1.6;

  /* --- Layout ------------------------------------------------------- */
  --tcz-container: 1200px;
  --tcz-gap:       24px;
  --tcz-section-y: 80px;

  /* --- Abstandsskala ------------------------------------------------ */
  --tcz-space-1:  4px;
  --tcz-space-2:  8px;
  --tcz-space-3: 12px;
  --tcz-space-4: 16px;
  --tcz-space-5: 24px;
  --tcz-space-6: 32px;
  --tcz-space-7: 48px;
  --tcz-space-8: 64px;

  /* --- Dekor: der Pinselstrich traegt den Akzent (ClubIdentity::css) - */
  --tcz-brush-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M5 15 C55 4 150 21 215 7' fill='none' stroke='%23b7d900' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* --- Rollen ------------------------------------------------------- */
  --tcz-bg:            var(--tcz-white);
  --tcz-bg-alt:        var(--tcz-light);
  --tcz-surface:       var(--tcz-white);
  --tcz-on-surface:    var(--tcz-text);
  --tcz-accent:        var(--tcz-lime);
  --tcz-accent-hover:  var(--tcz-lime-dark);
  --tcz-on-accent:     var(--tcz-on-lime);
}

/* Das Backend laeuft auf der dunklen Hauptfarbe - gleiche Marke, andere Rollen. */
[data-theme="admin"] {
  --tcz-bg:         var(--tcz-light);
  --tcz-bg-alt:     var(--tcz-white);
  --tcz-surface:    var(--tcz-white);
  --tcz-on-surface: var(--tcz-text);
}