/* brand/tokens.css — Wappen & Weite (Fusion C)
   Design-Quelle: mockups/fusion-c-wappen-und-weite.html
   Eine Quelle für alle drei Sites + CMS. */

:root {
  /* Farben */
  --bg: #070812;
  --panel: #0e1020;
  --panel2: #151732;
  --border: rgba(200, 205, 225, .11);
  --text: #ecedf4;
  --muted: #8f96ab;

  --silver-hi: #f0f2f8;
  --silver-lo: #8f96a8;
  --silver: #c7ccd8;

  --violet: #6f5cc0;
  --glow: #9d7bff;

  --live: #52d18d;
  --amber: #ffb454;

  /* Radien / Rahmen (aus dem Mockup übernommene, wiederkehrende Werte) */
  --radius-sm: 3px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Abstände */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 26px;
  --space-5: 38px;

  /* Schriften */
  --font-script: 'Great Vibes', cursive;   /* Marke / Kleeblatt-Schriftzug */
  --font-label: 'Cinzel', serif;           /* Labels / Nav / Buttons */
  --font-headline: 'Cormorant Garamond', serif; /* Headlines */
  --font-body: 'Inter', sans-serif;        /* Fließtext */
  --font-mono: 'IBM Plex Mono', monospace; /* Telemetrie / Aufnahmedaten */
}

/* Selbst gehostete Fonts — Dateien liegen NICHT in diesem Repo.
   Vor dem ersten Einsatz brand/fonts/*.woff2 aus dem Font-Anbieter
   (z. B. google-webfonts-helper) hier ablegen:
     brand/fonts/great-vibes-400.woff2
     brand/fonts/cinzel-500.woff2
     brand/fonts/cinzel-700.woff2
     brand/fonts/cormorant-garamond-300.woff2
     brand/fonts/cormorant-garamond-400.woff2
     brand/fonts/inter-300.woff2
     brand/fonts/inter-400.woff2
     brand/fonts/ibm-plex-mono-300.woff2
     brand/fonts/ibm-plex-mono-400.woff2 */

@font-face {
  font-family: 'Great Vibes';
  src: url('fonts/great-vibes-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body.wuw {
  margin: 0;
  background:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,.35), transparent),
    radial-gradient(80% 45% at 50% -8%, rgba(111,92,192,.24), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
}

.wuw a { color: inherit; text-decoration: none; }
.wuw .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wuw .mono { font-family: var(--font-mono); }

.wuw .metal {
  background: linear-gradient(180deg, #fff 0%, var(--silver-hi) 30%, var(--silver-lo) 55%, #d8dce8 70%, #6f7688 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(157,123,255,.3));
}