/* =======================================================================
   ANGELIC WARRIOR QUEEN, DESIGN TOKENS
   Aus: Visual Identity & Design Guidelines v2, Abschnitt 8.1.

   Das ist die einzige Stelle, an der Farbe, Schrift und Rhythmus dieser
   Website definiert sind. Eine spaetere Palettenaenderung ist eine
   Bearbeitung, keine Suche.

   Die Idee in einem Satz: kuehle Struktur, warmes Papier, ein Goldstern.
   ======================================================================= */

:root {
  /* -- Farbe, "Paper & Steel" ------------------------------------------ */
  --awq-nightfall:  #16242F;   /* Ueberschriften, dunkle Sektionen, Fuss  */
  --awq-slate:      #3E5C72;   /* Links, zweite Knoepfe, Sektionsflaechen */
  --awq-moonstone:  #A9B8C6;   /* Raender, Trenner, leise Schrift dunkel  */
  --awq-mist:       #DCE5E9;   /* kuehle Karten und Sektionen             */
  --awq-paper:      #F5F1E8;   /* der Grund. Warm, leicht gebrochen       */
  --awq-gold:       #E3B23C;   /* der Akzent. Flaeche, niemals Schrift    */
  --awq-gold-deep:  #8A6212;   /* Gold ALS Schrift, und Hover des Knopfs  */
  --awq-ink:        #2B3138;   /* Fliesstext                              */

  /* -- Der Soulmate-Ton -------------------------------------------------
     Eingezaeunt, nicht frei. Dusk Rose gehoert AUSSCHLIESSLICH auf die
     Soulmate- und Matching-Ebene: Shopping List, Mitgliedschaft,
     Zusammenkuenfte. Nie auf die allgemeine Startseite, nie als
     Schriftfarbe.
     Der Grund ist Disziplin: Dusk Rose ist ein Produktsignal, keine
     Markenfarbe. Wer es sieht, soll daran erkennen, in welchem Teil der
     Welt er gerade ist. Sobald es auf die Startseite wandert, bedeutet
     es nichts mehr, und die Marke rutscht in das Rosa der ganzen
     Kategorie ab. */
  --awq-rose:       #E0B4AE;   /* nur Flaechen der Soulmate-Ebene         */
  --awq-rose-deep:  #8E4B4E;   /* der lesbare Ton, 5,7:1 auf Papier       */

  /* Die eine Kombination, auf der die Marke steht:
     Nightfall auf Gold Star, 8,1:1. Das ist der Knopf, und er ist
     woertlich eine Eintrittskarte. Gold ist NIE Schriftfarbe auf hellem
     Grund; es ist eine Flaeche, auf der dunkle Schrift sitzt. Diese eine
     Regel haelt das Gold davon ab, in das Luxus-Gold der ganzen Branche
     abzurutschen. */

  /* -- Schrift ---------------------------------------------------------
     Fraunces traegt die Waerme und die leicht unperfekte Kante: es sieht
     nach einem Buch aus, das ihr gehoert, nicht nach einem Markensystem.
     Inter macht die Arbeit und tritt zurueck.
     Geladen ueber fonts.bunny.net, nicht Google: keine Cookies, keine
     IP-Uebermittlung in die USA. Bei einer britischen Seite mit
     UK-GDPR-Erklaerung ist das der Unterschied zwischen sauber und
     erklaerungsbeduerftig. */
  --awq-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --awq-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* -- Mass ------------------------------------------------------------
     680px Textspalte, weil 60 bis 75 Zeichen je Zeile die Grenze ist, ab
     der eine gut geschriebene Seite anstrengend wird.
     4px Radius, nicht rund: eine Eintrittskarte hat Ecken. */
  --awq-radius:    4px;
  --awq-text:      680px;
  --awq-wide:      1120px;

  /* Achterskala. Alles ist ein Vielfaches, damit nichts um drei Pixel
     danebenliegt und die Seite unruhig wirkt, ohne dass man sagen kann,
     warum. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 128px;

  --awq-rhythmus: 112px;   /* Abstand ZWISCHEN zwei Sektionen */
  --awq-nav:      72px;
}

@media (max-width: 900px) { :root { --awq-rhythmus: 80px; --awq-nav: 64px; } }
@media (max-width: 600px) { :root { --awq-rhythmus: 64px; } }

/* Weniger Bewegung, wenn das System danach fragt. Die Einblendungen sind
   Schmuck; fuer Menschen mit vestibulaeren Beschwerden sind sie es nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}