/* Erscheinungsbild Alexander Umbricht für Rallly (termine.umbricht.li).
   Apache schreibt diesen Link in jede HTML-Seite (mod_substitute), siehe dienste/rallly.md.
   Rallly setzt Farbe und Logo ohne White-Label-Lizenz fest: Farben stehen als Inline-Stil am
   html-Element, darum überall !important. Werte aus tools/erscheinungsbild-alexander (privat-apps). */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/umbricht-design/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/umbricht-design/source-sans-3-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500 600; font-style: normal; font-display: swap;
  src: url("/umbricht-design/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/umbricht-design/source-sans-3-700.woff2") format("woff2"); }

/* Hauptfarbe: Rot, im Dunkelmodus der hellere Wert */
html:root {
  --primary-light: #B4584F !important;
  --primary-light-foreground: #FFFFFF !important;
  --primary-dark: #E79187 !important;
  --primary-dark-foreground: #242A30 !important;
  --font-sans: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
}

/* Grautöne: Rallly baut alles aus der kühlen Zink-Palette. Hell warme Töne (Papier, Fläche,
   Linie), dunkel die Werte des Dunkelmodus (Grund #242A30, Fläche #2D343B). */
html:root {
  --gray-hue: 250 !important;
  --color-gray-50: #FAF8F4 !important;
  --color-gray-100: #F5F2EC !important;
  --color-gray-200: #E8E3DB !important;
  --color-gray-300: #C4BEB5 !important;
  --color-gray-400: #A8A39C !important;
  --color-gray-500: #857F78 !important;
  --color-gray-600: #68635E !important;
  --color-gray-700: #535A5F !important;
  --color-gray-800: #2D343B !important;
  --color-gray-900: #242A30 !important;
  --foreground: #303A40 !important;
  --card-foreground: #303A40 !important;
}
html.dark:root {
  --foreground: #F4F2EE !important;
  --card-foreground: #F4F2EE !important;
  --card: #2D343B !important;
  --card-accent: #343B42 !important;
  --border: #535A5F !important;
}

/* Bedeutungsfarben (README Abschnitt 2): Ja grün, «falls erforderlich» Hafer */
html:root {
  --color-green-400: #2D8336 !important; --color-green-500: #2D8336 !important; --color-green-600: #2D8336 !important;
  --color-amber-400: #B68C3D !important; --color-amber-500: #B68C3D !important; --color-amber-600: #B68C3D !important;
}
html.dark:root {
  --color-green-400: #94E282 !important; --color-green-500: #94E282 !important; --color-green-600: #94E282 !important;
  --color-amber-400: #E0BA77 !important; --color-amber-500: #E0BA77 !important; --color-amber-600: #E0BA77 !important;
}

/* Akzentfarben von Avataren und Kacheln: keine Grüntöne, kein Lila und Pink.
   Erzeugt aus den Farbstufen (tokens/farben.json): Lime, Lila, Violett -> Tinte;
   Pink, Fuchsia -> Rot; Cyan, Teal, Sky, Emerald -> Blau. */
html:root {
  /* lime -> tinte */ --color-lime-50: #CED9E2 !important; --color-lime-100: #CED9E2 !important; --color-lime-200: #CED9E2 !important; --color-lime-300: #95A7B7 !important; --color-lime-400: #95A7B7 !important; --color-lime-500: #3D5263 !important; --color-lime-600: #3D5263 !important; --color-lime-700: #2A3843 !important; --color-lime-800: #2A3843 !important; --color-lime-900: #2A3843 !important; --color-lime-950: #2A3843 !important;
  /* purple -> tinte */ --color-purple-50: #CED9E2 !important; --color-purple-100: #CED9E2 !important; --color-purple-200: #CED9E2 !important; --color-purple-300: #95A7B7 !important; --color-purple-400: #95A7B7 !important; --color-purple-500: #3D5263 !important; --color-purple-600: #3D5263 !important; --color-purple-700: #2A3843 !important; --color-purple-800: #2A3843 !important; --color-purple-900: #2A3843 !important; --color-purple-950: #2A3843 !important;
  /* violet -> tinte */ --color-violet-50: #CED9E2 !important; --color-violet-100: #CED9E2 !important; --color-violet-200: #CED9E2 !important; --color-violet-300: #95A7B7 !important; --color-violet-400: #95A7B7 !important; --color-violet-500: #3D5263 !important; --color-violet-600: #3D5263 !important; --color-violet-700: #2A3843 !important; --color-violet-800: #2A3843 !important; --color-violet-900: #2A3843 !important; --color-violet-950: #2A3843 !important;
  /* pink -> rot */ --color-pink-50: #FACBC4 !important; --color-pink-100: #FACBC4 !important; --color-pink-200: #FACBC4 !important; --color-pink-300: #DB8D83 !important; --color-pink-400: #DB8D83 !important; --color-pink-500: #B4584F !important; --color-pink-600: #B4584F !important; --color-pink-700: #732F2A !important; --color-pink-800: #732F2A !important; --color-pink-900: #732F2A !important; --color-pink-950: #732F2A !important;
  /* fuchsia -> rot */ --color-fuchsia-50: #FACBC4 !important; --color-fuchsia-100: #FACBC4 !important; --color-fuchsia-200: #FACBC4 !important; --color-fuchsia-300: #DB8D83 !important; --color-fuchsia-400: #DB8D83 !important; --color-fuchsia-500: #B4584F !important; --color-fuchsia-600: #B4584F !important; --color-fuchsia-700: #732F2A !important; --color-fuchsia-800: #732F2A !important; --color-fuchsia-900: #732F2A !important; --color-fuchsia-950: #732F2A !important;
  /* cyan -> blau */ --color-cyan-50: #BBDFE9 !important; --color-cyan-100: #BBDFE9 !important; --color-cyan-200: #BBDFE9 !important; --color-cyan-300: #6EB0C3 !important; --color-cyan-400: #6EB0C3 !important; --color-cyan-500: #3B94AB !important; --color-cyan-600: #3B94AB !important; --color-cyan-700: #055061 !important; --color-cyan-800: #055061 !important; --color-cyan-900: #055061 !important; --color-cyan-950: #055061 !important;
  /* teal -> blau */ --color-teal-50: #BBDFE9 !important; --color-teal-100: #BBDFE9 !important; --color-teal-200: #BBDFE9 !important; --color-teal-300: #6EB0C3 !important; --color-teal-400: #6EB0C3 !important; --color-teal-500: #3B94AB !important; --color-teal-600: #3B94AB !important; --color-teal-700: #055061 !important; --color-teal-800: #055061 !important; --color-teal-900: #055061 !important; --color-teal-950: #055061 !important;
  /* sky -> blau */ --color-sky-50: #BBDFE9 !important; --color-sky-100: #BBDFE9 !important; --color-sky-200: #BBDFE9 !important; --color-sky-300: #6EB0C3 !important; --color-sky-400: #6EB0C3 !important; --color-sky-500: #3B94AB !important; --color-sky-600: #3B94AB !important; --color-sky-700: #055061 !important; --color-sky-800: #055061 !important; --color-sky-900: #055061 !important; --color-sky-950: #055061 !important;
  /* emerald -> blau */ --color-emerald-50: #BBDFE9 !important; --color-emerald-100: #BBDFE9 !important; --color-emerald-200: #BBDFE9 !important; --color-emerald-300: #6EB0C3 !important; --color-emerald-400: #6EB0C3 !important; --color-emerald-500: #3B94AB !important; --color-emerald-600: #3B94AB !important; --color-emerald-700: #055061 !important; --color-emerald-800: #055061 !important; --color-emerald-900: #055061 !important; --color-emerald-950: #055061 !important;
}

/* Schrift: Rallly setzt Inter über eine Klasse am html-Element */
html, html body, html [class] {
  font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
}

/* Logo: Rallly-Wortmarke ausblenden, Giebel-A mit Namen an ihre Stelle.
   «Powered by Rallly» bleibt bewusst stehen. */
svg[class*="text-[#4f46e5]"] {
  visibility: hidden;
}
:has(> svg[class*="text-[#4f46e5]"]) {
  min-width: 260px;
  background: url("/umbricht-design/wortmarke-hell.svg") center / contain no-repeat;
}
html.dark :has(> svg[class*="text-[#4f46e5]"]) {
  background-image: url("/umbricht-design/wortmarke-dunkel.svg");
}