/* Heller Modus. theme-init.js setzt <html data-theme="light"> (Wahl in den Einstellungen, Standard folgt dem Gerät).
   Grundlage sind die Markenfarben: heller Grund nah an Alice Blue, Text Space Cadet, Akzent Imperial Red.
   Kopfleiste, Banner, Videos, Key-Art und Collections bleiben dunkel bzw. farbig; Texte darauf behalten helle Farben. */

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f2f4f8; --side:#ffffff; --surface:#ffffff; --card:#ffffff; --card-2:#eceff5; --line:#e2e6ee;
  --fg:#2B2D42; --muted:#5b6478; --muted-2:#8790a6;
  --btn:#e9ecf3; --btn-h:#dde1eb; --input:#f7f8fb; --input-line:#d5dae5; --prose:#3b3e55;
  --shadow:0 0 40px 0 rgba(43,45,66,.07);
  --ok:#1f8a55;
}

/* Bereiche, die immer dunkel bleiben: dort gelten die dunklen Text-Farben weiter. */
:root[data-theme="light"] :is(.topbar, .feature, .build, .genre, .auth-art, .side-card, .coll, .thumb, .preview-bar, .hero-c, .page-head:not(.hub-main > .page-head)) {
  --fg:#EDF2F4; --muted:#b9c1d0; --muted-2:#8d99ae;
  color:var(--fg);
}
/* Dropdowns in der Kopfleiste sind wieder hell. */
:root[data-theme="light"] .topbar .pop {
  --fg:#2B2D42; --muted:#5b6478; --muted-2:#8790a6; --surface:#ffffff; --card-2:#eceff5; --line:#e2e6ee;
  color:var(--fg);
}
:root[data-theme="light"] .topbar .pop .pill.team { color:#fff; }
:root[data-theme="light"] .pop { box-shadow:0 24px 60px -16px rgba(43,45,66,.35); }
:root[data-theme="light"] .pop-n:hover, :root[data-theme="light"] .menu-pop a:hover, :root[data-theme="light"] .menu-pop button:hover,
:root[data-theme="light"] .mega-i:hover, :root[data-theme="light"] .mega-i:focus-visible { background:var(--card-2); }

/* Flächen */
:root[data-theme="light"] .nav-sm { box-shadow:4px 0 30px rgba(43,45,66,.06); }
:root[data-theme="light"] .nav-sm a:hover { background:var(--card-2); color:var(--fg); }
:root[data-theme="light"] .nav-sm a.active { color:#fff; background:var(--accent); }
:root[data-theme="light"] .side { border-right-color:var(--line); }
:root[data-theme="light"] .side-nav a:hover { background:var(--card-2); }
:root[data-theme="light"] .side-nav a.active { color:var(--fg); }
:root[data-theme="light"] .side-label, :root[data-theme="light"] .side-links a { color:var(--muted); }
:root[data-theme="light"] .scrim { background:rgba(43,45,66,.45); }
:root[data-theme="light"] .foot { color:var(--muted); }
:root[data-theme="light"] .foot a { color:var(--muted); }
:root[data-theme="light"] .foot a:hover { color:var(--fg); }

/* Texte, die im dunklen Modus fest hell gesetzt sind */
:root[data-theme="light"] .prose, :root[data-theme="light"] .rules { color:var(--prose); }
:root[data-theme="light"] .post-body { color:var(--prose); }
:root[data-theme="light"] .ach.open .ach-t b { color:var(--muted); }
:root[data-theme="light"] .ach-m, :root[data-theme="light"] .pop-n time { color:var(--muted); }
:root[data-theme="light"] .sc-i small { color:var(--muted); }
:root[data-theme="light"] .opt i { border-color:#b9c0cf; }
:root[data-theme="light"] .opt:hover, :root[data-theme="light"] .seg a:hover, :root[data-theme="light"] .soc-stat:hover { background:var(--card-2); }
:root[data-theme="light"] .opt .n, :root[data-theme="light"] .tag, :root[data-theme="light"] code.scope { background:var(--card-2); color:var(--muted); }

/* Grün und Rot für Text auf hellem Grund dunkler (Kontrast AA) */
:root[data-theme="light"] .pill.free, :root[data-theme="light"] .card .meta .free, :root[data-theme="light"] .pack-x,
:root[data-theme="light"] .chg.up { color:#1f8a55; }
:root[data-theme="light"] .pill.free { background:rgba(31,138,85,.12); }
:root[data-theme="light"] .pill.blocked, :root[data-theme="light"] .ev.denied .ev-i { color:#c0002c; }
:root[data-theme="light"] .ev-i { background:rgba(31,138,85,.12); color:#1f8a55; }
:root[data-theme="light"] .pill.st-development { color:#EDF2F4; }

/* Pillen auf Bildern bleiben dunkel mit heller Schrift */
:root[data-theme="light"] :is(.pill.kind, .pill.dark, .pill.offline, .pill.coin, .thumb .foot-l) { color:#EDF2F4; }

/* Karten, Kästen, Formulare: leichte Kontur statt Schatten allein */
:root[data-theme="light"] :is(.box, .card, .tile .thumb, .creator, .stat-t, .ph, .ph-nav, .hub-g, .post, .notice, .empty, .mod-card, .card-form) { box-shadow:var(--shadow); }
:root[data-theme="light"] .notice { background:var(--surface); }
:root[data-theme="light"] .empty { border-color:var(--input-line); }
:root[data-theme="light"] .stat-t { background:var(--card-2); }
:root[data-theme="light"] .btn { color:var(--fg); box-shadow:none; }
:root[data-theme="light"] .btn.primary { color:#fff; box-shadow:4px 7px 12px 0 rgba(239,35,60,.2); }
:root[data-theme="light"] .btn.ghost { box-shadow:inset 0 0 0 2px var(--input-line); }
:root[data-theme="light"] .btn.ghost:hover { box-shadow:inset 0 0 0 2px var(--muted-2); }
:root[data-theme="light"] .tabs a { background:var(--surface); color:var(--muted); }
:root[data-theme="light"] .tabs a.active { background:var(--accent); color:#fff; }
:root[data-theme="light"] .chips a { background:var(--surface); }
:root[data-theme="light"] .chips a.active { color:#fff; }
:root[data-theme="light"] .ph-cover { background:var(--card-2); }
:root[data-theme="light"] .achb { filter:drop-shadow(0 4px 8px rgba(43,45,66,.25)); }
:root[data-theme="light"] .achb.dim { filter:grayscale(1) brightness(1.05) contrast(.8); opacity:.6; }
:root[data-theme="light"] .meter, :root[data-theme="light"] .cap { background:var(--card-2); }
:root[data-theme="light"] .dlg { box-shadow:0 30px 80px -10px rgba(43,45,66,.45); }
:root[data-theme="light"] .dlg::backdrop { background:rgba(43,45,66,.45); }
:root[data-theme="light"] .toast { box-shadow:0 18px 50px -10px rgba(43,45,66,.35); }
:root[data-theme="light"] .notice.test { background:repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--card-2) 14px 28px); }

/* Knöpfe mit Symbol: hell außerhalb der Kopfleiste, dunkel-transparent darin */
:root[data-theme="light"] .icon-btn { background:var(--card-2); color:var(--muted); }
:root[data-theme="light"] .icon-btn:hover { background:var(--btn-h); color:var(--fg); }
:root[data-theme="light"] .topbar { --input-line:rgba(237,242,244,.22); --btn:rgba(0,0,0,.2); --btn-h:rgba(0,0,0,.3); }
:root[data-theme="light"] .topbar .icon-btn, :root[data-theme="light"] .topbar .who { background:rgba(0,0,0,.18); color:rgba(237,242,244,.8); }
:root[data-theme="light"] .topbar .icon-btn:hover { background:rgba(0,0,0,.3); color:#fff; }
:root[data-theme="light"] .topbar .btn:not(.primary) { color:#EDF2F4; }

/* Zahlen-Kacheln im roten Banner (Wallet) bleiben halbtransparent dunkel mit weißer Schrift */
:root[data-theme="light"] :is(.page-head, .hero-c) .stat-t { background:rgba(0,0,0,.2); box-shadow:none; }
:root[data-theme="light"] :is(.page-head, .hero-c) .stat-t b { color:#fff; }