/* GPTGenie · Heller Modus: Korrekturen von Hand.
 * Die meisten Farben rechnet tools/light.js automatisch um (css/light-app.css, css/light-content.css).
 * Hier steht nur, was die Rechnung nicht gut trifft: Grundflächen, Karten, Abdunkeln hinter Fenstern, Schrift-Töne.
 * Wird auf allen Seiten mit hellem Modus als letzte Datei geladen. Gilt nur bei <html data-theme="light"> (js/theme.js).
 */

/* Beim Umschalten keine Übergänge der einzelnen Flächen, die ganze Seite blendet stattdessen über (js/theme.js) */
html.gg-theme-switching *, html.gg-theme-switching *::before, html.gg-theme-switching *::after { transition: none !important; }
html.gg-theme-fading::view-transition-old(root),
html.gg-theme-fading::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

html[data-theme="light"] {
  /* Grundfarben */
  --bg:  rgb(var(--a-f2f1f6,242,241,246));
  --bg2: #e9e8ef;
  --text:   #1c1b22;
  --text-2: rgba(28,27,34,0.70);
  --text-3: rgba(28,27,34,0.52);
  --text-4: rgba(28,27,34,0.32);

  /* Akzent-Töne, die oft als Schrift benutzt werden: dunkler, damit lesbar auf Weiß */
  --purple-2: rgb(var(--a-7c3aed,124,58,237));
  --purple-3: rgb(var(--a-7c3aed,124,58,237));
  --purple-4: rgb(var(--a-6d28d9,109,40,217));

  /* Karten auf der Seite: weißes Milchglas */
  --lg-card:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 100%);
  --lg-card-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(28,27,34,0.06),
    0 10px 30px -18px rgba(28,27,34,0.25),
    0 0 0 0.5px rgba(28,27,34,0.10);
  --lg-rim: rgba(28,27,34,0.09);
  --lg-rim-top: rgba(255,255,255,0.9);

  /* Schwebende Fenster (Liquid Glass): helles Glas */
  --gl-tint: rgba(var(--a-fafafd,250,250,253),0.78);
  --gl-sheen: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 34%, rgba(255,255,255,0.10) 100%);
  --gl-rim: rgba(28,27,34,0.10);
  --gl-rim-top: rgba(255,255,255,0.95);
  --gl-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.95),
    0 0 0 0.5px rgba(28,27,34,0.12),
    0 30px 80px -30px rgba(28,27,34,0.35),
    0 10px 30px -14px rgba(28,27,34,0.18);
  --gl-scrim: rgba(28,27,34,0.22);
  --gl-well: rgba(255,255,255,0.75);
  --gl-well-rim: rgba(28,27,34,0.08);
}

/* Seitenhintergrund: ruhiges Hellgrau statt dunklem Lila-Schein */
html[data-theme="light"] body { background: var(--bg) !important; }
html[data-theme="light"] body::before { background: var(--bg) !important; }
html[data-theme="light"] body::after { opacity: 0.12; }

html[data-theme="light"] ::selection { background: rgba(var(--a-a855f7,168,85,247),0.25); color: inherit; }

/* Stern bei „Feedback“: bleibt gelb */
html[data-theme="light"] .gg-star-i { color: #e8890c !important; fill: #fcd34d !important; }

/* Zeichenfelder und gespeicherte Buchstaben: Die Striche werden weiß gespeichert (das bleibt so, die PDF färbt sie).
   Im hellen Modus nur die Anzeige umdrehen: helles Feld, dunkle Striche. hue-rotate hält die Akzentfarbe der Hilfslinien. */
html[data-theme="light"] #guideImage,
html[data-theme="light"] #fastScanGuideImage,
html[data-theme="light"] #fast-scan-ui .guide-image,
html[data-theme="light"] #letterCanvas,
html[data-theme="light"] #fastScanCanvas,
html[data-theme="light"] #saved-letters img.saved-instance-img { filter: invert(1) hue-rotate(180deg); }
html[data-theme="light"] #app-section .canvas-wrapper,
html[data-theme="light"] #fast-scan-ui .letter-guide-container,
html[data-theme="light"] #fast-scan-ui .canvas-wrapper { background: rgb(var(--a-fbfafd,251,250,253)) !important; }

/* Ratgeber- und Rechtsseiten: die große Karte weiß statt grau-lila */
html[data-theme="light"] .glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 100%) !important;
  border-color: rgba(28,27,34,0.08) !important;
  border-top-color: rgba(255,255,255,0.95) !important;
  box-shadow: 0 1px 2px rgba(28,27,34,0.05), 0 18px 50px -24px rgba(28,27,34,0.25), 0 0 0 0.5px rgba(28,27,34,0.08) !important;
}

/* Gewählter Eintrag (Reiter, Menüzeile, Navigation): weiße Pille auf hellgrauer Spur wie bei iOS */
html[data-theme="light"] .lp-tabs { background: rgba(28,27,34,0.06) !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="light"] .lp-tab-indicator,
html[data-theme="light"] .lp-tab.active,
html[data-theme="light"] .nav-indicator {
  background: #fff !important;
  border-color: rgba(28,27,34,0.06) !important;
  box-shadow: 0 1px 3px rgba(28,27,34,0.12), 0 2px 8px -4px rgba(28,27,34,0.12) !important;
}
html[data-theme="light"] .gl-dd-lens {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 2px rgba(28,27,34,0.08), 0 4px 12px -4px rgba(28,27,34,0.16), inset 0 0 0 0.5px rgba(28,27,34,0.06);
}
html[data-theme="light"] .nav-links { background: rgba(28,27,34,0.05) !important; border-color: transparent !important; box-shadow: none !important; }

/* Schrift mit Farbverlauf: im hellen Modus einfarbig (der Verlauf wäre auf Weiß zu blass) */
html[data-theme="light"] :is(.gradient-text, .info-card-number, .ls-wordmark span, .average-rating-number) {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: rgb(var(--a-7c3aed,124,58,237)) !important;
}
html[data-theme="light"] :is(.page-title, .modal-content h2, .news-popup-title, .fb-write-title) {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important;
}