/* ═══════════════════════════════════════════════════════════════════════════
   HASHIBONUS — Light-Override für Legacy-Seiten (Crypto-Guide, Support, Play, 404)
   Diese Seiten sind mit den dunklen Tailwind-/main.css-Klassen gebaut. Statt
   jede View umzuschreiben, mappen wir die genutzten Utility-Klassen hier auf
   die Papier-Palette. Wird NACH main.css/tw*.css geladen (Cascade gewinnt).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --paper: #ffeef4; --paper-2: #ffe3ec; --paper-3: #ffd6e3; --cream: #fffaf7;
  --pink: #ff4f8b; --pink-deep: #e0336f; --pink-soft: #ffbdd4;
  --ink: #4a1330; --mid: #8c3a5e; --soft: #c98aa6; --line: rgba(140,58,94,.18); --night: #2c0d1d;
  --gold: #ffc542; --mint: #37d39a; --sky: #57b8ff;
}
html, body, body.bg-ink-950 {
  background: radial-gradient(circle at 1px 1px, rgba(140,58,94,.13) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--paper) !important;
  color: var(--ink) !important;
  font-family: 'Fredoka', system-ui, sans-serif !important;
}
body::before, body::after { content: none !important; }
.font-display { font-family: 'Fredoka', system-ui, sans-serif !important; }
.font-num, .font-mono, .tabular-nums { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Flächen */
.bg-ink-950, .bg-ink-900, .bg-ink-800, .bg-ink-700, .bg-ink-900\/50, .bg-ink-900\/60, .bg-ink-900\/70, .bg-ink-950\/80,
.bg-bg, .bg-bg1, .bg-bg2, .bg-bg3, .bg-bg\/50, .bg-bg1\/70, .bg-bg2\/70, .bg-black\/20, .bg-black\/30 { background-color: var(--cream) !important; background-image: none !important; }
.bg-bg2, .bg-bg2\/70, .bg-ink-800, .bg-white\/5, .bg-white\/\[\.03\], .bg-white\/\[\.04\], .bg-white\/\[\.06\] { background-color: var(--paper-2) !important; }
.surface, aside nav.rounded-2xl, main section .rounded-2xl[class*="bg-bg1"], main section .rounded-xl[class*="bg-bg1"], main section [class*="bg-bg2"] {
  background: var(--cream) !important; backdrop-filter: none !important;
  border: 2px solid var(--ink) !important; box-shadow: 5px 5px 0 var(--ink);
}
.surface .surface, .surface [class*="bg-bg"], [class*="bg-bg"] [class*="bg-bg"] { box-shadow: none; border-width: 1.5px !important; border-color: var(--line) !important; }
.hover\:bg-white\/\[\.03\]:hover, .hover\:bg-white\/5:hover, .hover\:bg-white\/\[\.05\]:hover { background-color: var(--paper-2) !important; }

/* Text */
.text-white, .text-ink, .hover\:text-white:hover, .hover\:text-ink:hover { color: var(--ink) !important; }
.text-white\/85, .text-white\/80, .text-white\/75, .text-white\/70, .text-sub { color: var(--mid) !important; }
.text-white\/65, .text-white\/60, .text-white\/55, .text-white\/50, .text-sub2 { color: var(--mid) !important; }
.text-white\/45, .text-white\/40, .text-white\/35, .text-white\/30, .text-white\/25 { color: var(--soft) !important; }
.text-mint-200, .text-mint-300, .text-mint-400, .text-mint-500, .text-mint-500\/70, .text-gold, .text-gold2, .text-gold3 { color: var(--pink-deep) !important; }
.text-amber-200\/90, .text-amber-300, .text-amber-400, .text-yellow { color: #b8860b !important; }
.text-green, .text-emerald-300, .text-emerald-400 { color: #1d9d6f !important; }
.text-red, .text-red-300, .text-red-400 { color: #d63a5a !important; }
.text-blu, .text-blu2 { color: #2f7fd1 !important; }
.text-gray-300, .text-gray-400 { color: var(--mid) !important; }
.text-ink-950 { color: #fff !important; }
.bg-clip-text.text-transparent { color: var(--pink) !important; background: none !important; -webkit-text-fill-color: var(--pink); }

/* Linien */
.border-white\/5, .border-white\/10, .border-white\/\[\.06\], .border-white\/\[\.08\], .border-white\/15, .border-white\/20, .border-black\/10,
.border-gray-800, .divide-white\/5 > :not([hidden]) ~ :not([hidden]), .border-mint-500\/20, .border-mint-500\/30, .border-mint-500\/40 { border-color: var(--line) !important; }
.hover\:border-mint-500\/40:hover, .hover\:border-mint-400:hover, .hover\:border-amber-400\/60:hover, .hover\:border-amber-400\/70:hover, .focus\:border-mint-500\/60:focus, .focus\:border-amber-500\/60:focus { border-color: var(--pink) !important; }
.border-amber-500\/30, .border-amber-500\/20 { border-color: rgba(184,134,11,.4) !important; }
.border-mint-500\/30.rounded-full, .rounded-full.border-mint-500\/30 { border-color: var(--ink) !important; }

/* Akzent-Flächen */
.bg-mint-500\/10, .bg-mint-500\/15, .bg-mint-500\/\[\.04\], .from-mint-500\/10, .to-mint-500\/5, .bg-gradient-to-r.from-mint-500\/10 { background: var(--paper-3) !important; }
.bg-amber-500\/10, .bg-amber-500\/15, .from-amber-500\/\[\.08\], .bg-yellow\/15, .bg-yellow\/\[\.05\] { background: rgba(255,197,66,.22) !important; }
.bg-green\/15, .bg-\[\#43d67a\]\/10 { background: rgba(55,211,154,.18) !important; }
.bg-blu\/\[\.05\], .bg-\[\#5b5cf6\]\/10 { background: rgba(87,184,255,.16) !important; }
.bg-\[\#a855f7\]\/10 { background: rgba(180,140,255,.18) !important; }
.bg-mint-500 { background: var(--pink) !important; color: #fff !important; }
.bg-gray-900, .bg-gray-700, .bg-gray-800 { background: var(--cream) !important; }
.bg-indigo-600, .hover\:bg-indigo-500:hover { background: var(--pink) !important; }
.ring-ink-950, .ring-2 { --tw-ring-color: var(--cream); }

/* Komponenten aus main.css */
.btn-mint, .btn-twitch, .bg-mint-500.rounded-lg {
  background: var(--pink) !important; color: #fff !important; border: 2px solid var(--ink) !important; border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--ink) !important; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; text-shadow: none !important; filter: none !important;
}
.btn-mint:hover, .btn-twitch:hover { transform: translate(-1px,-1px) !important; box-shadow: 4px 4px 0 var(--ink) !important; background: var(--pink-deep) !important; color: #fff !important; }
.btn-ghost {
  background: var(--cream) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 12px !important; box-shadow: 2px 2px 0 var(--ink);
}
.btn-ghost:hover { background: var(--paper-2) !important; border-color: var(--ink) !important; }
.btn-red { border-radius: 12px !important; }
input, textarea, select { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--line) !important; border-radius: 10px !important; }
input:focus, textarea:focus, select:focus { border-color: var(--pink) !important; outline: none; box-shadow: 0 0 0 3px rgba(255,79,139,.18); }
input::placeholder, textarea::placeholder { color: var(--soft) !important; }
.badge, .pill, .chip { border-color: var(--line) !important; }
.lc-pill { background: var(--paper-3) !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; }
.skel { background: var(--paper-2) !important; }
.skel-bar { background: rgba(140,58,94,.12) !important; }
.float-back { background: var(--cream) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink) !important; }
.card-shimmer { animation: none !important; box-shadow: 5px 5px 0 var(--ink) !important; }
::selection { background: var(--pink-soft); }

/* Crypto-Guide: TOC + Sektions-Icons */
.toc-item { color: var(--mid) !important; }
.toc-item.is-active { background: var(--paper-3) !important; color: var(--ink) !important; border-left: 3px solid var(--pink) !important; box-shadow: none !important; }
.toc-item.is-active span:first-child, .toc-item span:first-child { background: var(--cream) !important; border-color: var(--ink) !important; color: var(--pink-deep) !important; }
main section > header > div:first-child { background: var(--pink) !important; border: 2px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink) !important; color: #fff !important; }
main section > header > div:first-child i { color: #fff !important; }
.cg-scroll::-webkit-scrollbar-thumb { background: var(--pink-soft) !important; }
.cg-scroll { scrollbar-color: var(--pink-soft) transparent !important; }
table th { color: var(--mid) !important; }
code, kbd, pre { background: var(--paper-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }

/* Überschriften: main.css erzwingt h1/h2/h3 = weiß → auf Rosé-Ink */
h1, h2, h3, h4, h5, h6, .h-display, h1.hero-headline { color: var(--ink) !important; font-family: 'Fredoka', system-ui, sans-serif !important; }
h1.text-\[\#43d67a\], h2.text-\[\#43d67a\] { color: #1d9d6f !important; }
h1.text-\[\#5b5cf6\], h2.text-\[\#5b5cf6\] { color: #4f46e5 !important; }
h1.text-\[\#a855f7\], h2.text-\[\#a855f7\] { color: #9333ea !important; }
h1 .text-transparent, h2 .text-transparent { color: var(--pink) !important; -webkit-text-fill-color: var(--pink); }
strong, b { color: var(--ink); }
.text-\[\#43d67a\] { color: #1d9d6f !important; } .text-\[\#5b5cf6\] { color: #4f46e5 !important; } .text-\[\#a855f7\] { color: #9333ea !important; }
.text-\[\#f7931a\], .text-\[\#ffa500\] { color: #d97706 !important; }
p, li, td, span, label, small { color: inherit; }
a.text-mint-300, a.text-mint-400, .hover\:text-mint-300:hover, .hover\:text-mint-400:hover { color: var(--pink-deep) !important; }
.text-white\/35.text-xs, .text-white\/35 { color: var(--mid) !important; }
/* Support-Login-Icon: Twitch-Lila-Kachel → Pink-Sticker */
.bg-\[\#9146ff\]\/15, .bg-purple-500\/15, .bg-mint-500\/15.rounded-2xl { background: var(--pink) !important; color: #fff !important; border: 2px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink); }
.bg-\[\#9146ff\]\/15 i, .bg-mint-500\/15.rounded-2xl i { color: #fff !important; }

/* Palette v2 — gedämpftes Rosé (synchron mit hashi.css) */
:root { --paper: #f0c6d4; --paper-2: #e9b6c7; --paper-3: #e2a5ba; --cream: #fbe9ef; --pink: #e8648a; --pink-deep: #c9466f; --pink-soft: #f2b3c6; --line: rgba(74,19,48,.18); }
html, body, body.bg-ink-950 { background: radial-gradient(circle at 1px 1px, rgba(74,19,48,.14) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--paper) !important; }
input, textarea, select { background: #fff5f8 !important; }

/* Palette v3 — altrosa/mauve (synchron mit hashi.css) */
:root { --paper: #dcb0c0; --paper-2: #d19fb1; --paper-3: #c68da2; --cream: #f6e2e8; --pink: #d4688a; --pink-deep: #ad4569; --pink-soft: #e6aabd; --line: rgba(74,19,48,.2); }
html, body, body.bg-ink-950 { background: radial-gradient(circle at 1px 1px, rgba(74,19,48,.14) 1px, transparent 1.6px) 0 0 / 18px 18px, var(--paper) !important; }
input, textarea, select { background: #fbeef2 !important; }