/* ------------------------------------------------------------------
   Bremen 1860 – Design Tokens
   Werte aus dem Corporate Design Manual (September 2024).
   Alle Komponenten greifen ausschließlich auf diese Variablen zu.
------------------------------------------------------------------ */

:root {
    /* ----- Vereinsfarben (CI-Manual S. 9) ----- */
    --c-rot:            #8d1d39;   /* 1860 Rot      – Primärfarbe         */
    --c-tiefrot:        #5a0728;   /* 1860 Tiefrot  – Sekundär/Akzent     */
    --c-weiss:          #ffffff;   /* 1860 Weiß                            */
    --c-anthrazit:      #2b2d32;   /* 1860 Anthrazit – CTA-Button, Text   */

    /* ----- Semantische Aliasse ----- */
    --c-primary:        var(--c-rot);
    --c-primary-deep:   var(--c-tiefrot);
    --c-on-primary:     var(--c-weiss);
    --c-surface:        var(--c-weiss);
    --c-text:           var(--c-anthrazit);
    --c-cta:            var(--c-anthrazit);
    --c-on-cta:         var(--c-weiss);

    /* ----- Abstufungen Rot (nur für Hover/States, sparsam) ----- */
    --c-rot-700:        #6e1530;   /* leicht abgedunkeltes Rot für Hover */
    --c-rot-50:         #f6e6ec;   /* hauchzartes Rot für Section-BG     */

    /* ----- Funktionale Neutrale (Form, Tabellen, Trenner) ----- */
    --c-neutral-900:    #1a1c20;
    --c-neutral-700:    #3a3d44;
    --c-neutral-500:    #6b7280;
    --c-neutral-300:    #d1d5db;
    --c-neutral-100:    #f3f4f6;

    /* ----- Status (außerhalb der Markenfarben, vereinsfremde Signaltöne sparsam einsetzen) ----- */
    --c-success:        #16a34a;
    --c-warning:        #d97706;
    --c-danger:         var(--c-rot);  /* statt eigenem Rot die Vereinsfarbe */

    /* ----- Typografie -----
       Uniform (TypeTogether) ist die CI-Hausschrift.
       Web-Lizenz / @font-face-Einbindung: TBD (lokal hosten, DSGVO).
       Bis dahin Fallback-Stack: Barlow Condensed liegt UNIFORM am nächsten.
    */
    --ff-display:       "Uniform Condensed Black", "Barlow Condensed", "Oswald", system-ui, sans-serif;
    --ff-body:          "Uniform Condensed", "Barlow Condensed", "Inter", system-ui, sans-serif;

    --fs-display:       clamp(2.75rem, 6vw + 1rem, 5.5rem);  /* Hero "FIT MIT!" */
    --fs-h1:            clamp(2.25rem, 4vw + 1rem, 3.5rem);
    --fs-h2:            clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    --fs-h3:            clamp(1.25rem, 1vw + 1rem, 1.625rem);
    --fs-body:          1rem;
    --fs-small:         0.875rem;

    /* CI-Vorgaben Zeilenabstand / Laufweite */
    --lh-title:         0.9;       /* Titel 90 %                         */
    --lh-subtitle:      1.05;      /* Untertitel / URL 105 %             */
    --lh-body:          1.4;       /* Fließtext 140 %                    */
    --tracking-title:   0.005em;   /* Laufweite 5                        */
    --tracking-url:     0.25em;    /* Laufweite 250 – URL gespreizt      */
    --tracking-em:      0.02em;    /* Laufweite 20 – Hervorhebungen      */

    /* ----- Spacing ----- */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-6:  1.5rem;
    --s-8:  2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-24: 6rem;

    /* ----- Radius -----
       CI nutzt vollkreisrunde CTAs und Halbkreis-Flächen.
       Cards bewusst kantig oder leicht gerundet, um Kreise als Markenelement freizuhalten.
    */
    --radius-sm:    4px;
    --radius:       8px;
    --radius-lg:    12px;
    --radius-pill:  999px;

    /* ----- Schatten (sparsam) ----- */
    --shadow-1:     0 1px 2px rgba(26,28,32,0.06), 0 1px 3px rgba(26,28,32,0.04);
    --shadow-2:     0 10px 30px rgba(26,28,32,0.12);

    /* ----- Container ----- */
    --container-max: 1240px;
    --container-pad: 1.25rem;

    /* ----- Motion ----- */
    --motion-fast:   120ms;
    --motion-base:   220ms;
    --easing:        cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
    }
}