/* infra-b4r, machines/vps/stacks/id/branding: das Aussehen der Anmeldung unter
 * login.id.b4r.one (ADR-0024). VoidAuth lädt diese Datei nach seinen eigenen Stilen.
 *
 * Die Werte sind die des Stores (app-web-sideshow, Entwurf 1): dunkle warme
 * Flächen, Amber für den Weg hinein, Figtree für den Text, Darker Grotesque
 * für Schriftzug und Überschriften. Die Schriften liegen daneben unter fonts/
 * und kommen von login.id.b4r.one selbst, nicht von Google Fonts.
 *
 * Es gibt nur das dunkle Schema; der Schalter dafür ist ausgeblendet. Ebenso die
 * Sprachwahl (die Flaggen sind Emoji; die Sprache folgt dem Browser) und
 * »Passwort vergessen«, das ohne Mailversand ins Leere führt — ein vergessenes
 * Passwort setzt der Admin über einen Link zurück. */

@font-face {
  font-family: "Figtree";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Darker Grotesque";
  font-weight: 800;
  font-display: swap;
  src: url("fonts/darker-grotesque-latin-800-normal.woff2") format("woff2");
}

html,
body,
body.light,
body.dark {
  color-scheme: dark !important;
}

html {
  --b4r-bg: #130d09;
  --b4r-surface: #1e1814;
  --b4r-surface-2: #2a221e;
  --b4r-line: #332c28;
  --b4r-line-strong: #534b46;
  --b4r-text: #f3f0ea;
  --b4r-muted: #b7b0a8;
  --b4r-accent: #ffb846;
  --b4r-on-accent: #201308;
  --b4r-danger: #ff887a;
  --b4r-danger-bg: #361714;

  --mat-sys-background: var(--b4r-bg);
  --mat-sys-surface: var(--b4r-bg);
  --mat-sys-surface-dim: var(--b4r-bg);
  --mat-sys-surface-bright: var(--b4r-surface-2);
  --mat-sys-surface-container-lowest: #0b0705;
  --mat-sys-surface-container-low: var(--b4r-surface);
  --mat-sys-surface-container: var(--b4r-surface);
  --mat-sys-surface-container-high: var(--b4r-surface-2);
  --mat-sys-surface-container-highest: var(--b4r-surface-2);
  --mat-sys-surface-variant: var(--b4r-surface-2);
  --mat-sys-on-surface: var(--b4r-text);
  --mat-sys-on-surface-variant: var(--b4r-muted);
  --mat-sys-on-background: var(--b4r-text);
  --mat-sys-outline: var(--b4r-line-strong);
  --mat-sys-outline-variant: var(--b4r-line);
  --mat-sys-primary: var(--b4r-accent);
  --mat-sys-on-primary: var(--b4r-on-accent);
  --mat-sys-primary-container: #4a3210;
  --mat-sys-on-primary-container: #ffddb0;
  --mat-sys-secondary-container: var(--b4r-surface-2);
  --mat-sys-on-secondary-container: var(--b4r-text);
  --mat-sys-error: var(--b4r-danger);
  --mat-sys-error-container: var(--b4r-danger-bg);
  --mat-sys-on-error-container: var(--b4r-danger);
}

body {
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgb(255 184 70 / 0.09), transparent 70%),
    var(--b4r-bg) !important;
  background-attachment: fixed !important;
}

.page-background,
mat-toolbar.mat-toolbar {
  background: transparent !important;
}

/* Kopfzeile: das Zeichen und der Schriftzug b4r. */
app-theme-toggle,
app-lang-switcher {
  display: none !important;
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.header-logo img {
  height: 26px !important;
  width: auto !important;
}

.header-logo::after {
  content: "b4r";
  color: var(--b4r-text);
  font: 800 34px / 1 "Darker Grotesque", "Arial Narrow", sans-serif;
  letter-spacing: -0.02em;
  padding-bottom: 4px;
}

/* Die Karte des Formulars. */
mat-card.mat-mdc-card {
  background: var(--b4r-surface) !important;
  border: 1px solid var(--b4r-line);
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 28px rgb(0 0 0 / 0.38) !important;
}

mat-card h1,
mat-card h2 {
  font-family: "Darker Grotesque", "Arial Narrow", sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 20px !important;
}

/* Knöpfe: Amber gehört dem Weg hinein. */
.mat-mdc-unelevated-button,
.mat-mdc-raised-button,
.mat-mdc-flat-button,
button[type="submit"].mat-mdc-button-base {
  border-radius: 999px !important;
  min-height: 44px;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Ohne Mailversand führt »Passwort vergessen« ins Leere. */
a[href="/forgot_password"],
a[href$="/forgot_password"] {
  display: none !important;
}