/* Marke daroPIXEL Eventfoto: Schriften, Grundfarben und die Wortmarke für alle
   Seiten (siehe docs/brand/README.md). Steht vor jedem anderen Stylesheet.
   Außer der Wortmarke setzt die Datei kein Aussehen; Seiten wählen die
   Schrift über die Variablen und Gästeseiten über das Design des Events
   (Schrift „Modern“ oder „Geometrisch“). Beide Schriften: SIL Open Font License 1.1, Lizenztexte
   unter /static/license-inter.txt und /static/license-outfit.txt. */

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('outfit.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'DejaVu Sans', sans-serif;
  --font-brand: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'DejaVu Sans', sans-serif;
  --brand-blue: #1297ff;
  --brand-gold: #d7b46a;
  --brand-night: #02040a;
  --brand-coral: #ff5a5f;
  --brand-amber: #ffb547;
  --brand-ink: #15151a;
  --brand-paper: #f5f5f7;
}

/* Wortmarke (views/brand.ts): Zeichen, „daroPIXEL“, Etikett „EVENTFOTO“. Die
   Schriftfarbe erbt sie von der Umgebung. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.wordmark .brand-mark {
  flex: none;
  width: 22px;
  height: 22px;
}

.wordmark b {
  font-weight: 800;
  color: var(--brand-blue);
}

.wordmark .name-tag {
  padding: 3px 6px 2px;
  background: var(--brand-gold);
  color: #1c1405;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}