/* ------------------------------------------------------------------
   Bremen 1860 – Fastbreak · Design Tokens
   Dieselbe Bildsprache wie die Tipoff-App (court.css, Richtung D vom
   25.10.2026): hell, Papierweiß, Anthrazit-Kopf, Vereinsrot, schräge
   Kanten. Orange gehört nur zu Live-/Spieltag-Momenten und zum schmalen
   Streifen in roten Flächen – nie auf Bedienelementen.
------------------------------------------------------------------ */
:root {
    color-scheme: light;

    /* ----- Vereinsfarben ----- */
    --c-rot:          #8d1d39;   /* Vereinsrot                          */
    --c-primary:      #8d1d39;
    --c-primary-deep: #5a0728;   /* Tiefrot: Band in roten Flächen      */
    --c-rot-700:      #6e1530;   /* Button-Hover                        */
    --c-rot-tint:     #f6e8ec;   /* zarte Rot-Fläche (eigene Zeile)     */
    --c-rot-hell:     #f6b5c4;   /* Rot-Ton auf Anthrazit               */
    --c-on-primary:   #ffffff;

    /* ----- Fastbreak-Flächen ----- */
    --c-tinte:        #1c1b1f;   /* Tinte: Kopf, Footer, Text, Zahlen   */
    --c-tinte-2:      #2a292e;   /* Hover auf Tinte                     */
    --c-bg:           #f6f3ee;   /* Papierweiß                          */
    --c-surface:      #ffffff;   /* Karten                              */
    --c-surface2:     #efeae3;   /* Eingaben, Zweitknöpfe, Wechselzeilen*/
    --c-elev:         #fbf9f6;   /* Kartenkopf                          */
    --c-line:         #d8d1c7;   /* Haarlinien                          */
    --c-muted:        #6b6560;   /* Nebentext                           */
    --c-text:         #1c1b1f;

    /* ----- Gameday (nur Live-Momente und Streifen) ----- */
    --c-gameday:       #ea580c;
    --c-gameday-amber: #f59e0b;
    --c-gameday-tint:  #fdeccb;
    --c-gameday-text:  #8a3a06;

    /* ----- Status ----- */
    --c-sieg:         #2e7d50;
    --c-sieg-tint:    #e7f3ec;

    /* ----- Typografie -----
       Barlow für Fließtext, Barlow Condensed kursiv für Titel und Zahlen.
    */
    --ff-display: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
    --ff-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-display: clamp(3rem, 7vw + 1rem, 6.5rem);
    --fs-h1:      clamp(2.25rem, 4vw + 1rem, 3.75rem);
    --fs-h2:      clamp(1.85rem, 2.5vw + 1rem, 2.75rem);
    --fs-h3:      clamp(1.3rem, 1vw + 1rem, 1.7rem);
    --fs-body:    1rem;
    --fs-small:   0.875rem;

    --lh-title:      0.92;
    --lh-subtitle:   1.1;
    --lh-body:       1.55;
    --tracking-title: -0.005em;
    --tracking-label: 0.08em;
    --tracking-em:    0.03em;

    /* ----- Fastbreak-Geometrie -----
       Fast eckig. Schrägen laufen überall im selben Winkel (-16°), damit
       Hero, Band, Knöpfe und Chips wie aus einem Guss wirken.
    */
    --skew:       8px;            /* Schräge an Knöpfen und Kacheln     */
    --skew-sm:    5px;            /* Schräge an Chips                   */
    --cut:        24px;           /* angeschnittene Unterkante (Hero)   */
    --band-angle: -16deg;

    /* ----- Spacing / Radius / Schatten ----- */
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
    --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;
    --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 999px;
    /* Flach: Fastbreak lebt von Fläche und Linie, nicht von Schatten. */
    --shadow-1: 0 1px 0 rgba(28,27,31,.06);
    --shadow-2: 0 12px 28px -14px rgba(28,27,31,.35);

    --container-max: 1240px;
    --container-pad: 1.25rem;
    --header-h: 4.25rem;
    --motion-base: 180ms;
    --easing: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) { :root { --motion-base: 0ms; } }