/* ==========================================================================
   LoudTrail — Gestaltungswerte (Design Tokens)
   Einzige Quelle der Wahrheit für Farben, Abstände, Radien, Schrift, Bewegung.

   REGEL: In Komponenten wird NIEMALS ein fester Wert geschrieben.
   Kein #FF6B1A, kein 16px, kein 8px Radius — immer nur var(--...).
   Wer eine Regel ändern will, ändert diese Datei, nicht 40 Komponenten.
   ========================================================================== */

:root {

  /* --- FARBEN: Bedeutung, nicht Aussehen -------------------------------
     Die Namen beschreiben die FUNKTION. Deshalb --color-action und nicht
     --orange: So kann niemand Orange für etwas verwenden, das keine Aktion
     ist. Die Benennung setzt das Farbsystem durch.                        */

  /* Flächen */
  --color-bg:              #0A0A0B;   /* Seitenhintergrund                 */
  --color-surface:         #141416;   /* Karten, Listenzeilen              */
  --color-surface-raised:  #1C1C20;   /* Dialoge, hervorgehobene Karten    */
  --color-border:          #26262A;   /* Trennlinien, Umrandungen          */

  /* Text */
  --color-text:            #F2F2F3;   /* Fließtext, Überschriften          */
  --color-text-muted:      #9A9AA3;   /* Zweitrangiges, Beschriftungen     */
  --color-text-inverse:    #141621;   /* Auf hellen/orangen Flächen        */

  /* Bedeutungsfarben — ausnahmslos so verwenden */
  --color-action:          #FF6B1A;   /* Marke, Knöpfe, aktive Navigation  */
  --color-action-hover:    #FF8340;
  --color-done:            #3FBF6A;   /* gesehen, erledigt, bestätigt      */
  --color-award:           #E0A32E;   /* Headliner, Erfolge, Auszeichnung  */
  --color-danger:          #E5484D;   /* Löschen, Warnung, „nicht gesehen" */
  --color-unsure:          #E0A32E;   /* „Weiß nicht" im Swipe-Modus       */

  /* Schmuckfarben je Festivaljahrgang (Bändchen).
     NUR als schmaler Randstreifen einsetzen, nie als Fläche — sonst
     konkurrieren sie mit den Bedeutungsfarben oben.                       */
  --band-1:  #C2452F;  --band-2:  #2F7BC2;  --band-3:  #6A9E3C;
  --band-4:  #8E4FA8;  --band-5:  #C2892F;  --band-6:  #2FA79B;
  --band-7:  #B03A6E;  --band-8:  #4F63B8;  --band-9:  #7A7F45;
  --band-10: #A85A2F;  --band-11: #3E8F6F;  --band-12: #8B5A9E;

  /* --- SCHRIFT ---------------------------------------------------------
     Versalien ausschließlich für Überschriften, Rubriken, Knöpfe.
     Bandnamen und Fließtext in normaler Groß- und Kleinschreibung.        */

  --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.75rem;   /* 12 — Hilfstexte, Bildnachweise               */
  --text-sm:   0.875rem;  /* 14 — Zweitzeilen, Beschriftungen            */
  --text-base: 1rem;      /* 16 — Fließtext (nie kleiner!)               */
  --text-lg:   1.125rem;  /* 18 — Listenzeilen, Bandnamen                */
  --text-xl:   1.5rem;    /* 24 — Abschnittsüberschriften                */
  --text-2xl:  2rem;      /* 32 — Seitentitel                            */
  --text-3xl:  3rem;      /* 48 — Kennzahlen auf der Übersicht           */

  /* Anzeige-Skala — NUR für die Anzeigeschrift (--font-display).
     Plakat-Typografie sitzt nicht auf einer Fließtext-Skala: sie beginnt dort,
     wo --text aufhört, und braucht oben mehr Luft. Die Stufen sind aus den
     tatsächlich verwendeten Größen abgeleitet, keine erfundene Reihe.
     Skaliert bewusst NICHT mit „größere Schrift" — diese Größen sind bereits groß. */
  --display-xs:   1.25rem;  /* 20 — Bandzeilen, kleine Rubriken            */
  --display-sm:   1.625rem; /* 26 — Kartentitel, Abschnittsköpfe           */
  --display-md:   2rem;     /* 32 — Seitentitel                            */
  --display-lg:   2.5rem;   /* 40 — Hero-Bandname                          */
  --display-xl:   3.25rem;  /* 52 — große Kennzahlen                       */
  --display-2xl:  5.75rem;  /* 92 — Gig-Wrapped-Kennzahl                   */
  --display-hero: 8.75rem;  /* 140 — dekorativer Initial auf der Swipe-Karte */

  --leading-tight: 1.15;  /* Überschriften */
  --leading-body:  1.55;  /* Fließtext     */
  --tracking-caps: 0.06em;
  --tracking-claim: 0.22em; /* „LOG THE LOUD" */

  /* --- ABSTÄNDE (Vierer-Raster) ---------------------------------------- */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;
  --space-4: 16px;   --space-5: 24px;   --space-6: 32px;
  --space-7: 48px;   --space-8: 64px;

  /* --- RADIEN ----------------------------------------------------------- */
  --radius-sm:   6px;    /* Chips, kleine Marken            */
  --radius-md:  10px;    /* Knöpfe, Eingabefelder           */
  --radius-lg:  14px;    /* Karten                          */
  --radius-xl:  20px;    /* Dialoge, Blätter von unten      */
  --radius-pill: 999px;  /* Bändchen, runde Knöpfe          */
  --radius-icon: 22.5%;  /* App-Symbol-Kachel               */

  /* --- BEDIENFLÄCHEN ---------------------------------------------------- */
  --tap-min:      44px;  /* Mindestgröße überall            */
  --tap-comfort:  48px;
  --tap-festival: 56px;  /* Festival-Modus: dreckige Finger */

  --icon-sm: 20px;       /* in Listen      */
  --icon-md: 24px;       /* in Navigation  */
  --icon-lg: 32px;

  /* --- BEWEGUNG --------------------------------------------------------- */
  --motion-fast:   120ms;  /* Zustandswechsel, Antippen      */
  --motion-base:   220ms;  /* Aufklappen, Seitenwechsel      */
  --motion-slow:   420ms;  /* Wechsel in den Festival-Modus  */
  --ease:          cubic-bezier(0.2, 0, 0, 1);

  /* --- EBENEN ----------------------------------------------------------- */
  --z-sticky: 10;  --z-tabbar: 40;  --z-sheet: 60;  --z-toast: 80;
}

/* ==========================================================================
   FESTIVAL-MODUS — Werte werden überschrieben, Komponenten bleiben gleich.
   Das ist der eigentliche Gewinn dieser Bauweise: Der Fokusmodus ist keine
   zweite Oberfläche, sondern dieselbe mit anderen Werten.
   ========================================================================== */

[data-mode="festival"] {
  --color-bg:          #000000;  /* reines Schwarz spart Akku bei OLED */
  --color-surface:     #000000;
  --color-text:        #FFFFFF;  /* maximaler Kontrast bei Sonne       */
  --color-text-muted:  #C8C8CE;

  --text-base: 1.25rem;   /* 20 */
  --text-lg:   1.625rem;  /* 26 */
  --text-xl:   2.25rem;   /* 36 */
  --text-2xl:  3rem;      /* 48 */
  --text-3xl:  4.5rem;    /* 72 */

  --tap-min:     var(--tap-festival);
  --tap-comfort: var(--tap-festival);

  --space-4: 20px;  --space-5: 32px;  --space-6: 40px;

  --motion-fast: 80ms;  --motion-base: 120ms;  /* weniger Bewegung */
}

/* Nutzerwunsch „größere Schrift" (Profil → Darstellung) */
[data-textsize="large"] {
  --text-sm:   1rem;
  --text-base: 1.125rem;
  --text-lg:   1.3125rem;
}

/* Systemeinstellung „weniger Bewegung" respektieren */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}