/* Weddination — globales Stylesheet.
   Enthält per design-system.md nur Design-Tokens, Basis-Reset und die
   Framework-Boot-UI (Ladeanzeige, Fehlerbanner). Alles andere lebt in
   per-Komponenten-CSS (.razor.css). */

/* Fraunces (SIL Open Font License, siehe fonts/OFL.txt) wird selbst
   ausgeliefert: keine Fremdverbindung zur Laufzeit. Variable Schrift,
   deshalb trägt eine Datei alle Gewichte von 400 bis 600. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farben */
  --wd-ink: #2B2833;
  --wd-ink-soft: #5C5766;
  --wd-bg: #FAF7F2;
  --wd-surface: #FFFFFF;
  --wd-line: #E4DED4;
  --wd-primary: #35604A;
  --wd-primary-hover: #2A4E3C;
  --wd-primary-soft: #E7EFE9;
  --wd-accent: #B98A2F;
  --wd-danger: #A63A2E;
  --wd-danger-soft: #F7E9E7;
  --wd-focus: #35604A;

  /* Typografie */
  --wd-font-heading: "Fraunces", Georgia, serif;
  --wd-font-body: system-ui, "Segoe UI", sans-serif;
  --wd-text-sm: 0.875rem;
  --wd-text-base: 1rem;
  --wd-text-lg: 1.125rem;
  --wd-text-xl: 1.5rem;
  --wd-text-2xl: 2rem;
  --wd-text-3xl: 2.75rem;

  /* Spacing-Skala (bindend) */
  --wd-space-1: 4px;
  --wd-space-2: 8px;
  --wd-space-3: 12px;
  --wd-space-4: 16px;
  --wd-space-5: 24px;
  --wd-space-6: 32px;
  --wd-space-7: 48px;
  --wd-space-8: 64px;

  /* Form */
  --wd-radius: 8px;
  --wd-radius-lg: 16px;
  --wd-shadow: 0 1px 3px rgb(43 40 51 / 0.12);

  /* Gastfläche (Lauf 012) — was Fremde ohne Anmeldung sehen: die
     Wunschliste und die Anmeldeseite. Karteinlos, eigene Farbwelt, eigene
     Schriftskala; Spacing, Radius und Schrift teilt sie mit der Appfläche.
     Verbindlich beschrieben in design-system.md. */
  --wg-paper: #F7F3ED;
  --wg-paper-deep: #EFE8DE;
  --wg-ink: #221F1C;
  --wg-ink-soft: #6E655B;
  --wg-line: #DCD2C4;
  --wg-accent: #8C3B2B;
  --wg-accent-hover: #732F22;

  --wg-display: clamp(2.25rem, 8vw, 3.25rem);
  --wg-title: 1.375rem;
  --wg-title-lg: 1.75rem;
  --wg-body: 1.0625rem;
  --wg-label: 0.875rem;
  --wg-label-tracking: 0.08em;
}

/* Basis-Reset */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--wd-primary);
  margin: 0 var(--wd-space-1) 0 0;
  width: 18px;
  height: 18px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light only;
}

body {
  margin: 0;
  background: var(--wd-bg);
  color: var(--wd-ink);
  font-family: var(--wd-font-body);
  font-size: var(--wd-text-base);
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--wd-font-heading);
  line-height: 1.2;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--wd-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Framework-Boot-UI */
.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}

.loading-progress circle {
  fill: none;
  stroke: var(--wd-line);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--wd-primary);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: 600;
  color: var(--wd-ink-soft);
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Wird geladen …");
}

#blazor-error-ui {
  color-scheme: light only;
  background: var(--wd-danger-soft);
  color: var(--wd-ink);
  border-top: 2px solid var(--wd-danger);
  bottom: 0;
  box-shadow: var(--wd-shadow);
  display: none;
  left: 0;
  padding: var(--wd-space-3) var(--wd-space-5);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--wd-space-3);
  top: var(--wd-space-2);
}