/* Syphia Talk: Syphia-Marke (syphia.com) + Windows-11-Dunkel (Fluent). Gilt für alle Nutzer, auch Login. */
@font-face {
  font-family: "Geist";
  src: url("/branding/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* {
  /* Material-3-Farben des Clients überschreiben (Werte als r,g,b) */
  --mdui-color-primary: 255, 90, 31 !important;
  --mdui-color-on-primary: 14, 14, 14 !important;
  --mdui-color-primary-container: 74, 32, 16 !important;
  --mdui-color-on-primary-container: 255, 176, 138 !important;
  --mdui-color-inverse-primary: 184, 60, 15 !important;
  --mdui-color-surface-tint-color: 255, 90, 31 !important;

  --mdui-color-secondary: 169, 164, 157 !important;
  --mdui-color-on-secondary: 14, 14, 14 !important;
  --mdui-color-secondary-container: 46, 46, 46 !important;
  --mdui-color-on-secondary-container: 242, 242, 240 !important;

  --mdui-color-tertiary: 255, 176, 138 !important;
  --mdui-color-on-tertiary: 14, 14, 14 !important;
  --mdui-color-tertiary-container: 58, 58, 58 !important;
  --mdui-color-on-tertiary-container: 242, 242, 240 !important;

  --mdui-color-error: 255, 122, 112 !important;
  --mdui-color-on-error: 14, 14, 14 !important;
  --mdui-color-error-container: 90, 30, 26 !important;
  --mdui-color-on-error-container: 255, 200, 195 !important;

  --mdui-color-background: 14, 14, 14 !important;
  --mdui-color-on-background: 242, 242, 240 !important;
  --mdui-color-surface: 20, 20, 20 !important;
  --mdui-color-on-surface: 242, 242, 240 !important;
  --mdui-color-surface-variant: 43, 43, 43 !important;
  --mdui-color-on-surface-variant: 169, 164, 157 !important;
  --mdui-color-surface-dim: 14, 14, 14 !important;
  --mdui-color-surface-bright: 58, 58, 58 !important;
  --mdui-color-surface-container-lowest: 10, 10, 10 !important;
  --mdui-color-surface-container-low: 26, 26, 26 !important;
  --mdui-color-surface-container: 32, 32, 32 !important;
  --mdui-color-surface-container-high: 43, 43, 43 !important;
  --mdui-color-surface-container-highest: 52, 52, 52 !important;
  --mdui-color-outline: 90, 90, 90 !important;
  --mdui-color-outline-variant: 46, 46, 46 !important;
  --mdui-color-inverse-surface: 242, 242, 240 !important;
  --mdui-color-inverse-on-surface: 14, 14, 14 !important;
  --mdui-color-shadow: 0, 0, 0 !important;
  --mdui-color-scrim: 0, 0, 0 !important;

  /* dieselben Farben als Hex für die --md-sys-color-Variablen */
  --md-sys-color-primary: #FF5A1F !important;
  --md-sys-color-on-primary: #0E0E0E !important;
  --md-sys-color-primary-container: #4A2010 !important;
  --md-sys-color-on-primary-container: #FFB08A !important;
  --md-sys-color-secondary: #A9A49D !important;
  --md-sys-color-on-secondary: #0E0E0E !important;
  --md-sys-color-secondary-container: #2E2E2E !important;
  --md-sys-color-on-secondary-container: #F2F2F0 !important;
  --md-sys-color-tertiary: #FFB08A !important;
  --md-sys-color-on-tertiary: #0E0E0E !important;
  --md-sys-color-tertiary-container: #3A3A3A !important;
  --md-sys-color-on-tertiary-container: #F2F2F0 !important;
  --md-sys-color-error: #FF7A70 !important;
  --md-sys-color-on-error: #0E0E0E !important;
  --md-sys-color-error-container: #5A1E1A !important;
  --md-sys-color-on-error-container: #FFC8C3 !important;
  --md-sys-color-background: #0E0E0E !important;
  --md-sys-color-on-background: #F2F2F0 !important;
  --md-sys-color-surface: #141414 !important;
  --md-sys-color-on-surface: #F2F2F0 !important;
  --md-sys-color-surface-variant: #2B2B2B !important;
  --md-sys-color-on-surface-variant: #A9A49D !important;
  --md-sys-color-surface-dim: #0E0E0E !important;
  --md-sys-color-surface-bright: #3A3A3A !important;
  --md-sys-color-surface-container-lowest: #0A0A0A !important;
  --md-sys-color-surface-container-low: #1A1A1A !important;
  --md-sys-color-surface-container: #202020 !important;
  --md-sys-color-surface-container-high: #2B2B2B !important;
  --md-sys-color-surface-container-highest: #343434 !important;
  --md-sys-color-outline: #5A5A5A !important;
  --md-sys-color-outline-variant: #2E2E2E !important;
  --md-sys-color-inverse-surface: #F2F2F0 !important;
  --md-sys-color-inverse-on-surface: #0E0E0E !important;
  --md-sys-color-inverse-primary: #B83C0F !important;
  --md-sys-color-shadow: #000000 !important;
  --md-sys-color-scrim: #000000 !important;
}

html, body, #root, button, input, textarea, select {
  font-family: "Geist", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif !important;
}
code, pre, kbd {
  font-family: "Geist Mono", "Cascadia Code", Consolas, monospace !important;
}

body {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 90, 31, 0.10), transparent 70%),
    #0E0E0E !important;
}

/* Wordmark: der Client zeichnet das alte Logo als Inline-SVG (500x94), wir ersetzen es durch unseres */
svg[width="500"][height="94"] > * { display: none !important; }
svg[width="500"][height="94"] {
  background: url("/assets/web/wordmark.svg") center / contain no-repeat !important;
  width: min(380px, 82vw) !important;
  height: auto !important;
  aspect-ratio: 500 / 94;
}

/* Login-Seite: Zitat und Footer (Inhalte setzt syphia.js) */
.syphia-quote {
  opacity: 1 !important;
  color: #A9A49D;
  font-style: italic;
  font-size: 1.05em;
  max-width: 28ch;
}
.syphia-footer-wrap {
  justify-content: center !important;
  width: 100%;
}
.syphia-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #A9A49D !important;
  text-decoration: none !important;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.syphia-footer:hover { color: #FF5A1F !important; }
.syphia-copy {
  color: #8B867F;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}
.syphia-copy .syphia-footer { font-size: 1em; }

/* Fluent-Ecken und Schatten */
dialog, [role="dialog"], [role="menu"], [role="tooltip"], mdui-dialog, mdui-menu {
  border-radius: 12px !important;
}
input, textarea, mdui-text-field {
  border-radius: 8px !important;
}

::selection { background: rgba(255, 90, 31, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }