/* ═══════════════════════════════════════════════════════════════════════════
   Slogan Select — Farbschicht (Instanz fanstories.letsgoo.io, seit 23.09.2026)

   Laedt NACH lg-light.css (src/app/(app)/layout.tsx) und setzt nur Token plus
   den Hauptknopf. Aufbau, Abstaende und alle Regeln bleiben die der hellen
   Fassung — eine Marke bringt Farbe mit, keine zweite Oberflaeche.

   Palette aus dem Zeichen des Kunden (#-Pinselzeichen, Verlauf oben links
   Blau -> Mitte Flieder/Pfirsich -> unten rechts Rot), gemessen am Bild:
     Blau #80A0DE · Flieder #8A98CD · Rosenholz #BE777B · Rot #CF4548
   Das Logo-Blau selbst schafft auf Weiss nur 2.6:1 — als Flaeche unter weisser
   Schrift und als Verweisfarbe steht deshalb dasselbe Blau abgedunkelt:
     #2F55B5  weiss darauf 6.8:1, auf dem Seitengrund 6.2:1
   Rot bleibt dem Verlauf vorbehalten: als Akzent kaeme es mit Fehler- und
   Loeschfarbe durcheinander.

   Selektor html:root:root:root — eine Stufe ueber lg-light.css (html:root:root),
   damit die Reihenfolge der Dateien nicht entscheidet.
   ═══════════════════════════════════════════════════════════════════════════ */

html:root:root:root {
  /* Neutrale Grotesk statt der Rundschrift, die fanstories.com gehoerte.
     Inter liefert next/font ohnehin aus (src/lib/fonts.ts, --font-inter). */
  --aura-font-sans: var(--font-inter), "Inter", -apple-system, system-ui, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --aura-accent: #2f55b5;
  --aura-accent-rgb: 47, 85, 181;
  --aura-accent-strong: #24448f;
  --aura-accent-ink: #ffffff;
  --aura-accent-06: rgba(47, 85, 181, 0.06);
  --aura-accent-10: rgba(47, 85, 181, 0.1);
  --aura-accent-14: rgba(47, 85, 181, 0.14);
  --aura-accent-28: rgba(47, 85, 181, 0.28);
  --aura-accent-50: rgba(47, 85, 181, 0.5);

  /* Zweiter Knopf: der Logoverlauf, so weit aufgehellt, dass schwarze Schrift
     darauf ruhig steht. */
  --aura-accent-2: linear-gradient(135deg, #e2e9fb 0%, #eee4f4 50%, #fbe4da 100%);
  --aura-accent-2-hover: linear-gradient(135deg, #d4dffa 0%, #e5d8f0 50%, #f8d6c8 100%);
  --aura-accent-2-ink: #16181f;

  --aura-link: #2f55b5;
  --aura-link-hover: #24448f;

  /* Die Felder der Anmeldemaske: ein Hauch Logo-Blau statt fanstories-Grau. */
  --aura-field-quiet: #e9eef9;

  /* Seitengrund: dieselbe Diagonale wie das Zeichen — kuehles Blau oben links,
     fast Weiss in der Mitte, warmes Rosé unten rechts. Nur als Hauch. */
  --aura-page-wash: linear-gradient(135deg, #eaf0fc 0%, #f5f6fa 42%, #fbf3ef 70%, #fbe9e8 100%);
}

/* Der eine Knopf, der die Marke tragen darf: Generieren im vollen Logoverlauf.
   Alle drei Stufen halten weisse Schrift ueber 5:1 (#3A5FC4 5.8, #7D5AA8 5.4,
   #C3383E 5.3). */
html:root .aura-generate:not(:disabled) {
  background: linear-gradient(115deg, #3a5fc4 0%, #7d5aa8 52%, #c3383e 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(125, 90, 168, 0.28);
}
html:root .aura-generate:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 6px 18px rgba(125, 90, 168, 0.34);
}

/* Der Name neben dem Zeichen: tiefes Tinte-Blau, damit er neben dem bunten
   Zeichen nicht in Konkurrenz tritt. */
.lg-brand-name { color: #151a2c; }