/* Helles Theme „Warm Editorial“ (gleiche Tokens wie nostara-toolset, docs/02-design.md).
   Aktiv über <html data-theme="warm">. Ohne Attribut gilt das dunkle Standard-Design.
   Gelb (#f7ca45) dient nur als Fläche, nie als Schrift auf hellem Grund. */

html[data-theme="warm"] {
  color-scheme: light;
  --bg: #faf8f2;
  --surface: #fffdf6;
  --ink: #0b0c10;
  --muted: #5b5d66;
  --line: #e8e2d0;
  --accent: #f7ca45;
  --accent-strong: #f0b921;
  --eyebrow: #8a6a12;
  --shadow-card: 0 1px 2px rgb(11 12 16 / 0.04), 0 8px 24px -12px rgb(11 12 16 / 0.12);
  --obsidian: var(--bg);
  --slate: var(--muted);
  --cyan: var(--eyebrow);
}

html[data-theme="warm"] body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}
html[data-theme="warm"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="warm"] ::-webkit-scrollbar-thumb { background: var(--line); }
html[data-theme="warm"] ::selection { background: var(--accent); color: var(--ink); }

/* Tailwind-Farbklassen (vorkompiliert) auf Tokens umbiegen */
html[data-theme="warm"] .text-white,
html[data-theme="warm"] .text-white\/90,
html[data-theme="warm"] .hover\:text-white:hover { color: var(--ink); }
html[data-theme="warm"] .text-white\/20 { color: rgb(11 12 16 / 0.25); }
html[data-theme="warm"] .text-slate { color: var(--muted); }
html[data-theme="warm"] .text-slate\/40,
html[data-theme="warm"] .text-slate\/50,
html[data-theme="warm"] .text-slate\/60 { color: #6b6d75; }
html[data-theme="warm"] .text-cyan,
html[data-theme="warm"] .group:hover .group-hover\:text-cyan,
html[data-theme="warm"] .hover\:text-cyan:hover { color: var(--eyebrow); }
html[data-theme="warm"] .border-white\/10 { border-color: var(--line); }
html[data-theme="warm"] .bg-white\/5 { background-color: rgb(11 12 16 / 0.04); }
html[data-theme="warm"] .bg-obsidian\/95 { background-color: rgb(250 248 242 / 0.97); }
html[data-theme="warm"] .bg-graphite { background-color: #efe9d6; }
html[data-theme="warm"] .bg-cyan\/10 { background-color: rgb(247 202 69 / 0.28); }
html[data-theme="warm"] .border-cyan\/30 { border-color: rgb(138 106 18 / 0.35); }
html[data-theme="warm"] .group:hover .group-hover\:border-cyan\/40 { border-color: rgb(138 106 18 / 0.5); }
html[data-theme="warm"] .hover\:bg-cyan\/\[0\.04\]:hover { background-color: rgb(247 202 69 / 0.16); }
html[data-theme="warm"] .from-obsidian { --tw-gradient-from: #faf8f2 var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 248 242 / 0) var(--tw-gradient-to-position); }
html[data-theme="warm"] .via-obsidian\/80 { --tw-gradient-to: rgb(250 248 242 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(250 248 242 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="warm"] .to-obsidian { --tw-gradient-to: #faf8f2 var(--tw-gradient-to-position); }
html[data-theme="warm"] .from-graphite\/40 { --tw-gradient-from: var(--surface) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 253 246 / 0) var(--tw-gradient-to-position); }

/* Icons: Gelb-Strich hat auf hellem Grund zu wenig Kontrast → Ocker. Logo bekommt dunkle Fläche. */
html[data-theme="warm"] svg [stroke="#f7ca45"] { stroke: var(--eyebrow); }
html[data-theme="warm"] svg[viewBox="0 0 28 28"] [stroke="#f7ca45"] { stroke: var(--accent); }
html[data-theme="warm"] svg[viewBox="0 0 28 28"] {
  background: var(--ink); border-radius: 7px; padding: 4px; box-sizing: content-box;
}

html[data-theme="warm"] .text-gradient {
  background: linear-gradient(120deg, #0b0c10 0%, #0b0c10 60%, #8a6a12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="warm"] .noise { opacity: 0.6; }

html[data-theme="warm"] .glass-nav {
  background: rgb(250 248 242 / 0.8);
  border-bottom: 1px solid var(--line);
}
html[data-theme="warm"] .hairline { border-color: var(--line); }

html[data-theme="warm"] .btn-primary { background: var(--accent); color: var(--ink); }
html[data-theme="warm"] .btn-primary:hover { background: var(--accent-strong); box-shadow: var(--shadow-card); }
html[data-theme="warm"] .btn-outline { border-color: rgb(11 12 16 / 0.3); color: var(--ink); }
html[data-theme="warm"] .btn-outline:hover { border-color: var(--ink); box-shadow: var(--shadow-card); color: var(--ink); }

html[data-theme="warm"] .bento-card {
  border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-card);
}
html[data-theme="warm"] .bento-card::before {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(247,202,69,0.22), transparent 60%);
}
html[data-theme="warm"] .bento-card:hover { border-color: var(--accent-strong); }

html[data-theme="warm"] .cat-pill { border-color: var(--line); color: var(--muted); }
html[data-theme="warm"] .filter-btn { border-color: var(--line); color: var(--muted); }
html[data-theme="warm"] .filter-btn:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
html[data-theme="warm"] .filter-btn.active { border-color: var(--accent-strong); background: var(--accent); color: var(--ink); }

html[data-theme="warm"] .pillar { border-right-color: var(--line); }
html[data-theme="warm"] .pillar.active { background: rgb(247 202 69 / 0.14); }

html[data-theme="warm"] .partner-card { border-color: var(--line); box-shadow: var(--shadow-card); }
html[data-theme="warm"] .partner-photo { filter: grayscale(1) contrast(1.02) brightness(1); }
html[data-theme="warm"] .partner-card:hover .partner-photo { filter: grayscale(0); }

html[data-theme="warm"] input,
html[data-theme="warm"] textarea { background: #fff; border-color: var(--line); color: var(--ink); }
html[data-theme="warm"] input::placeholder,
html[data-theme="warm"] textarea::placeholder { color: rgb(91 93 102 / 0.8); }
html[data-theme="warm"] input:focus,
html[data-theme="warm"] textarea:focus { border-color: var(--ink); background: #fff; }

html[data-theme="warm"] a:focus-visible,
html[data-theme="warm"] button:focus-visible,
html[data-theme="warm"] input:focus-visible,
html[data-theme="warm"] textarea:focus-visible { outline-color: var(--ink); }

/* Theme-Schalter (in beiden Themes) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.16); color: #fff; background: transparent;
  cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease;
}
.theme-toggle:hover { border-color: #f7ca45; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="warm"] .theme-toggle { border-color: rgb(11 12 16 / 0.3); color: var(--ink); }
html[data-theme="warm"] .theme-toggle:hover { border-color: var(--ink); }
html[data-theme="warm"] .theme-toggle .icon-sun { display: block; }
html[data-theme="warm"] .theme-toggle .icon-moon { display: none; }
@media (min-width: 1024px) { .theme-toggle.lg\:hidden { display: none; } }
html[data-theme="warm"] .skip-link { background: var(--accent); color: var(--ink); }

/* Foto-Karten: Text liegt auf einer geschlossenen hellen Fläche statt auf dem Foto */
html[data-theme="warm"] .partner-card > .absolute.inset-x-0.bottom-0 {
  padding-top: 1.5rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
}