/* ============================================================
 * RCT Soft Edition Themes
 * Familien-Pattern: gemeinsame Base + 4 Akzent-Overrides.
 * Spec: docs/superpowers/specs/2026-05-13-rct-soft-edition-design.md
 * ============================================================ */

/* === Gemeinsame Soft-Base — überschreibt globale Tokens ===
 * Greift für alle Themes deren Slug mit "soft-" beginnt. */
[data-theme^="soft-"] {
  --rct-bg: #fafaf6;
  --rct-text: #2a2a28;
  --rct-text-muted: #6e6e68;
  --rct-radius: 0.25rem;
  --rct-radius-lg: 0.5rem;
  --rct-radius-xl: 1rem;
  --rct-section-padding-y: 5rem;
  --rct-shadow-soft: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  /* DM Mono raus — Mono-Slot zeigt auf Body-Font */
  --rct-font-mono: var(--rct-font-body);
  /* Hell-Färbung Step 1: Shell (Header, Bottom, Sidebars) folgt dem Theme-BG-Tint */
  --rct-shell-bg: var(--rct-bg);
  /* Step 2: Shell-Text + Border auf dunkel-passend (Default ist white/white-transparent für Dark-Themes) */
  --rct-shell-text: var(--rct-text);
  --rct-shell-muted: var(--rct-text-muted);
  --rct-shell-border: rgba(0,0,0,0.08);
  /* Step 4: Sidebar-Pseudo-Overlay deckender — Restschimmer der Aurora unterdrücken */
  --rct-sidebar-alpha: 0.9;
}

/* Text-Shadow auf Sidebar-Menü-Links für Soft-Themes entfernen.
 * Default ist `0 1px 6px rgba(0,0,0,0.9)` — schwarz-glow für weißen Text auf dunkel.
 * Bei dunklem Text auf hell verschmiert das Schwarz-Glow alles. */
[data-theme^="soft-"] #left nav ul li a,
[data-theme^="soft-"] #left .mod_navigation ul li a,
[data-theme^="soft-"] #right nav ul li a,
[data-theme^="soft-"] #right .mod_navigation ul li a {
  text-shadow: none;
}

/* Step 3: Theme-Switcher + Layout-Switcher für Soft-Themes.
 * Default-Stylesheet (rct-components.css) hardcoded weiße rgba-Werte für Dark-Themes —
 * Trigger-BG `rgba(255,255,255,0.05)`, Dropdown-BG `#1a1a1a`, Text `#fff`.
 * Für Soft-Themes spiegeln wir das ins Dunkel-auf-Hell. */
[data-theme^="soft-"] .theme-trigger,
[data-theme^="soft-"] .layout-trigger {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--rct-text);
}
[data-theme^="soft-"] .theme-trigger:hover,
[data-theme^="soft-"] .layout-trigger:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme^="soft-"] .theme-dropdown,
[data-theme^="soft-"] .layout-dropdown {
  background: var(--rct-bg);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme^="soft-"] .theme-opt-btn,
[data-theme^="soft-"] .layout-opt-btn {
  color: var(--rct-text-muted);
}
[data-theme^="soft-"] .theme-opt-btn:hover,
[data-theme^="soft-"] .layout-opt-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--rct-text);
}

/* Sidebar-Logo-Box für Soft-Themes — leichte Tönung + Trennlinie. */
[data-theme^="soft-"] #left .rct-sidebar-logo,
[data-theme^="soft-"] #right .rct-sidebar-logo {
  padding: 1rem;
  border-top: 1px solid var(--rct-shell-border);
  background-color: rgba(0,0,0,0.05);
}

/* Fullscreen-Mode überschreibt header-icon-btn auf hardcoded #fff
 * (siehe rct-layout.css:796) — für Soft-Themes auf dunkel zurückholen. */
[data-theme^="soft-"]:fullscreen .header-icon-btn,
:fullscreen [data-theme^="soft-"] .header-icon-btn {
  color: var(--rct-text);
}

/* Hauptnavigation Submenu-Dropdowns (Level 2/3/4) — Default hardcoded #1a1a1a
 * in rct-layout.css:1039/1074/1116 — für Soft-Themes auf Theme-BG-Tint. */
[data-theme^="soft-"] #navbar .mod_navigation ul.level_2,
[data-theme^="soft-"] #navbar .mod_navigation ul.level_3,
[data-theme^="soft-"] #navbar .mod_navigation ul.level_4 {
  background: var(--rct-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Sprachschalter — analog zum Theme-/Layout-Switcher. */
[data-theme^="soft-"] .lang-trigger {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--rct-text);
}
[data-theme^="soft-"] .lang-trigger:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme^="soft-"] .lang-dropdown {
  background: var(--rct-bg);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme^="soft-"] .lang-opt-btn {
  color: var(--rct-text-muted);
}
[data-theme^="soft-"] .lang-opt-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--rct-text);
}

/* Body-BG tint pro Theme (überschreibt --rct-bg in der Variant-Section unten) */
[data-theme^="soft-"] body {
  background-color: var(--rct-bg);
  color: var(--rct-text);
}

/* === Akzent-Overrides pro Theme === */

[data-theme="soft-sage"] {
  --rct-bg: #f5f7f0;
  --rct-accent: #7a9070;
  --rct-accent-rgb: 122,144,112;
  --rct-accent-strong: #5d7256;
  --rct-accent-soft: rgba(122,144,112,0.12);
  --rct-text-on-accent: #ffffff;
  /* Bundle-weit verwendete Primary-Tokens (Menü, Links, Hover) */
  --rct-primary: #5d7256;
  --rct-primary-light: #7a9070;
  --rct-primary-container: rgba(122,144,112,0.12);
  /* Aurora-Gradienten in Salbei-Tönen — übergangsweise bis WebGL Mode 19 in v1.7.1 */
  --grad-1: #7a9070;
  --grad-2: #5d7256;
  --grad-3: #b8c8a8;
  --grad-4: #f5f7f0;
}

[data-theme="soft-sky"] {
  --rct-bg: #f3f6fa;
  --rct-accent: #6a92b8;
  --rct-accent-rgb: 106,146,184;
  --rct-accent-strong: #4f7395;
  --rct-accent-soft: rgba(106,146,184,0.12);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #4f7395;
  --rct-primary-light: #6a92b8;
  --rct-primary-container: rgba(106,146,184,0.12);
}

[data-theme="soft-honey"] {
  --rct-bg: #faf6ee;
  --rct-accent: #c89a4e;
  --rct-accent-rgb: 200,154,78;
  --rct-accent-strong: #a17a32;
  --rct-accent-soft: rgba(200,154,78,0.14);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #a17a32;
  --rct-primary-light: #c89a4e;
  --rct-primary-container: rgba(200,154,78,0.14);
}

[data-theme="soft-rose"] {
  --rct-bg: #faf3f3;
  --rct-accent: #b88a8a;
  --rct-accent-rgb: 184,138,138;
  --rct-accent-strong: #966a6a;
  --rct-accent-soft: rgba(184,138,138,0.13);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #966a6a;
  --rct-primary-light: #b88a8a;
  --rct-primary-container: rgba(184,138,138,0.13);
}

/* === Animationen — nur dezent, alle deaktiviert via prefers-reduced-motion === */

/* soft-sky: Akzent-Glow auf interaktiven Elementen */
[data-theme="soft-sky"] .rct-cta-primary,
[data-theme="soft-sky"] button.theme-trigger {
  box-shadow: 0 0 0 0 var(--rct-accent-soft);
  transition: box-shadow 0.6s ease;
}
[data-theme="soft-sky"] .rct-cta-primary:hover,
[data-theme="soft-sky"] button.theme-trigger:hover {
  box-shadow: 0 0 0 8px var(--rct-accent-soft);
}

/* soft-honey: sehr langsamer BG-Gradient-Shift (60s pro Cycle) */
[data-theme="soft-honey"] body {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(200,154,78,0.05), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(200,154,78,0.04), transparent 50%);
  background-size: 200% 200%;
  animation: rct-soft-honey-drift 60s ease-in-out infinite alternate;
}
@keyframes rct-soft-honey-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* soft-rose: atmender Akzent-Glow */
[data-theme="soft-rose"] .rct-accent-mark,
[data-theme="soft-rose"] .opt-dot.soft-rose {
  animation: rct-soft-rose-breathe 6s ease-in-out infinite;
}
@keyframes rct-soft-rose-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* === Tech-Canvas-Stack ausblenden für die 3 statischen Soft-Themes ===
 * soft-sage behält den Standard-Aurora-Canvas als Übergang bis WebGL Mode 19 (v1.7.1).
 * sky/honey/rose sind CSS-only — die cyan-tech-Aurora und das Dots-Punktefeld
 * passen optisch nicht zum ruhigen Coach-Look.
 *
 * Beide Properties (display + opacity) gesetzt + is-visible-Variante mit
 * im Selektor: #gradient-canvas.is-visible hat opacity:0.95 !important (Spec 110)
 * — wir brauchen Spec 131 um es robust zu schlagen, sonst blitzt's beim
 * Theme-Wechsel kurz durch. */
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #gradient-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #gradient-canvas.is-visible,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-effects-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-dots-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-sky-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-baker-bg {
  display: none !important;
  opacity: 0 !important;
}

/* === Accessibility: alle Soft-Animationen pausieren === */
@media (prefers-reduced-motion: reduce) {
  [data-theme^="soft-"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* === Theme-Switcher-Dot-Farben ===
 * opt-dot = Vorschau-Punkte im Dropdown,
 * current-theme-dot = der eine Punkt im Trigger-Button (zeigt das aktive Theme). */
.current-theme-dot.soft-sage,
.opt-dot.soft-sage  { background: #7a9070; }
.current-theme-dot.soft-sky,
.opt-dot.soft-sky   { background: #6a92b8; }
.current-theme-dot.soft-honey,
.opt-dot.soft-honey { background: #c89a4e; }
.current-theme-dot.soft-rose,
.opt-dot.soft-rose  { background: #b88a8a; }