/* Designsystem Brain-Speech
 *
 * Die Werte stammen aus der Hochzeitsseite von Ludovica und Vincent
 * (ludovica-vincent-italian-wedding.lovable.app), am 18.08.2026 aus deren CSS
 * gelesen. Sie werden hier nicht neu erfunden, damit unsere Seite sichtbar zu
 * ihrer gehoert. Diese Datei gehoert weder Agent B noch Agent C, sie ist die
 * gemeinsame Grundlage und wird von beiden nur eingebunden, nie geaendert.
 */

@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&family=Dancing+Script:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap");

:root {
  /* Hell */
  --grund: hsl(19 28% 96%);
  --karte: hsl(19 28% 92%);
  --text: hsl(20 18% 28%);
  --text-leise: hsl(20 12% 45%);
  --primaer: hsl(338 43% 39%);
  --primaer-text: hsl(19 28% 96%);
  --beige: hsl(19 28% 85%);
  --olive: hsl(20 18% 35%);
  --salbei: hsl(357 12% 70%);
  --rahmen: hsl(20 12% 85%);

  --verlauf-warm: linear-gradient(135deg, hsl(19 28% 96%), hsl(19 28% 85%));

  --radius: 0.75rem;

  --schrift-titel: "Playfair Display", Georgia, serif;
  --schrift-text: "Crimson Text", Georgia, serif;
  --schrift-namen: "Dancing Script", cursive;
  --schrift-ui: Inter, system-ui, -apple-system, sans-serif;

  /* Der Redetext wird abends auf einem Handy gelesen, oft im Halbdunkel.
   * 19 px ist die Untergrenze, darunter wird es unhoeflich. */
  --text-groesse: 19px;
  --text-hoehe: 1.7;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: hsl(20 15% 8%);
    --karte: hsl(20 12% 12%);
    --text: hsl(19 22% 92%);
    --text-leise: hsl(20 10% 55%);
    --primaer: hsl(338 35% 55%);
    --primaer-text: hsl(20 15% 8%);
    --beige: hsl(20 12% 18%);
    --olive: hsl(20 12% 55%);
    --salbei: hsl(20 10% 45%);
    --rahmen: hsl(20 10% 18%);
    --verlauf-warm: linear-gradient(135deg, hsl(20 15% 8%), hsl(20 12% 12%));
  }
}

/* Umschalter von Hand, schlaegt die Systemeinstellung */
:root[data-thema="dunkel"] {
  --grund: hsl(20 15% 8%);
  --karte: hsl(20 12% 12%);
  --text: hsl(19 22% 92%);
  --text-leise: hsl(20 10% 55%);
  --primaer: hsl(338 35% 55%);
  --primaer-text: hsl(20 15% 8%);
  --beige: hsl(20 12% 18%);
  --olive: hsl(20 12% 55%);
  --salbei: hsl(20 10% 45%);
  --rahmen: hsl(20 10% 18%);
  --verlauf-warm: linear-gradient(135deg, hsl(20 15% 8%), hsl(20 12% 12%));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-ui);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}

.namen {
  font-family: var(--schrift-namen);
  color: var(--primaer);
  font-weight: 600;
}

.knopf {
  font-family: var(--schrift-ui);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--rahmen);
  background: var(--karte);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  /* Touch-Ziel, die Gaeste bedienen das einhaendig mit einem Glas in der anderen */
  min-height: 48px;
}

.knopf:hover {
  border-color: var(--primaer);
}

.knopf--primaer {
  background: var(--primaer);
  color: var(--primaer-text);
  border-color: var(--primaer);
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
}

.leise {
  color: var(--text-leise);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}