/* ============================================================
   THEME: metal
   Anmutung: Open-Air-Metal-Festival, Nacht, Bühnenlicht, Plakat.
   Farbrichtung angelehnt an summer-breeze.de: Schwarz, Knochenweiss,
   Glut-Orange, dazu getrocknetes Blutrot fuer Warnungen.

   Diese Datei enthaelt AUSSCHLIESSLICH Variablen.
   Struktur und Komponenten stehen in festival-theme.css.
   Ein neues Theme = eine Kopie dieser Datei mit anderen Werten.
   ============================================================ */

[data-fx-theme="metal"] {
  /* --- Flaechen ------------------------------------------------ */
  --fx-bg:            #0B0B0D;
  --fx-bg-elev:       #141317;
  /* Eingabefelder: Anthrazit, deutlich heller als der Seitenhintergrund,
     damit ein Feld als Feld erkennbar ist. */
  --fx-field:         #26232B;
  --fx-field-focus:   #2E2A34;
  --fx-surface:       #1A181D;
  --fx-surface-2:     #232027;
  --fx-line:          #2E2A33;
  --fx-line-strong:   #3D3743;

  /* --- Schrift-/Vordergrundfarben ------------------------------ */
  --fx-ink:           #F2EDE3;  /* Knochenweiss, nicht reinweiss   */
  --fx-ink-dim:       #9C949B;
  --fx-ink-faint:     #6A636F;

  /* --- Akzente -------------------------------------------------- */
  --fx-accent:        #FF5A1F;  /* Glut-Orange, Aktionen           */
  --fx-accent-hover:  #FF7A45;
  --fx-accent-ink:    #0B0B0D;  /* Text auf Akzentflaeche          */
  --fx-accent-soft:   rgba(255, 90, 31, 0.14);

  /* --- Status --------------------------------------------------- */
  --fx-ok:            #8FB35A;  /* Moos                            */
  --fx-warn:          #E2B04A;  /* Bernstein                       */
  --fx-danger:        #C22B3C;  /* getrocknetes Blut               */
  --fx-info:          #7C9BB0;  /* kaltes Stahlblau                */

  /* --- Typografie ----------------------------------------------- */
  --fx-font-display:  "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --fx-font-body:     "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fx-font-data:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fx-display-transform: uppercase;
  --fx-display-weight:    600;
  --fx-display-tracking:  0.02em;
  --fx-display-slant:     0deg;

  /* --- Form ----------------------------------------------------- */
  --fx-radius:        2px;   /* Plakat: harte Kanten               */
  --fx-radius-lg:     3px;
  --fx-border:        1px;
  --fx-shadow:        0 18px 40px -24px rgba(0, 0, 0, 0.9);

  /* --- Atmosphaere ---------------------------------------------- */
  --fx-grain:         0.045;  /* Filmkorn-Deckkraft, 0 = aus       */
  --fx-glow:          0 0 0 1px rgba(255, 90, 31, 0.35),
                      0 0 28px -6px rgba(255, 90, 31, 0.45);
  --fx-sidebar-bg:    linear-gradient(180deg, #131217 0%, #0C0B0E 100%);
  --fx-topbar-bg:     rgba(11, 11, 13, 0.86);
  --fx-hero-bg:       radial-gradient(120% 140% at 82% -10%,
                        rgba(255, 90, 31, 0.22) 0%,
                        rgba(255, 90, 31, 0.04) 42%,
                        transparent 70%),
                      linear-gradient(180deg, #1A181D 0%, #0E0D11 100%);
}