/* Binder theme (generated by tools/retheme.py from tools/theme.tpl.css — edit the template).
   Overrides the clone's colour variables; compiled CSS values were already
   recoloured by tools/recolor.py. Shared UI from inject/core.js lives here too. */

:root {
  --cream: #fbeef3;
  --cream-2: #f3dbe5;
  --cream-3: #d9b3c4;
  --ink: #12060c;
  --ink-soft: #2a1220;
  --ink-mute: #12060cb8;
  --ink-faint: #12060c38;
  --paper-line: #12060c14;
  --red: #d6034f;
  --red-deep: #8d073e;
  --red-hot: #f5035f;
  --red-rgb: 214,3,79;
  --red-hot-rgb: 245,3,95;
  --cream-rgb: 251,238,243;
  --ink-rgb: 18,6,12;
  --gold-rgb: 251,191,36;
  --bg-rgb: 18,6,12;
  --gold: #fbbf24;
  --gold-deep: #b45309;

  --color-cream: var(--cream);
  --color-cream-2: var(--cream-2);
  --color-cream-3: var(--cream-3);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-red: var(--red);
  --color-red-deep: var(--red-deep);
  --color-red-hot: var(--red-hot);

  /* dark-surface tokens used by the game/market pages */
  --bg: #12060c;
  --panel: #1e0c17;
  --panel-2: #2a1220;
  --cream-mute: #fbeef3a8;
  --cream-dim: #fbeef366;
  --line: #fbeef314;
  --edge: #fbeef329;
  --trust: var(--gold);
  --good: #6ee7a8;

  --sw-accent-hot: #f5035f;
  --sw-accent: #d6034f;
  --sw-bg: #12060c;
  --sw-panel: #1e0c17;
  --sw-panel-2: #2a1220;
  --sw-cream: #fbeef3;
  --sw-mute: rgba(251,238,243, 0.62);
  --sw-dim: rgba(251,238,243, 0.4);
  --sw-line: rgba(251,238,243, 0.1);
  --sw-edge: rgba(251,238,243, 0.18);
  --sw-danger: #ff4d4d;
  --sw-mono: "JetBrains Mono", ui-monospace, monospace;
  --sw-display: "Bowlby One", system-ui, sans-serif;
  --sw-word: "Bungee", system-ui, sans-serif;
  --sw-body: "Inter", system-ui, sans-serif;
}

.pgl {
  --pgl-bg: #12060c;
  --pgl-ink: #12060c;
  --pgl-panel: #1e0c17;
  --pgl-cream: #fbeef3;
  --pgl-cream-mute: rgba(251,238,243, 0.66);
  --pgl-cream-dim: rgba(251,238,243, 0.4);
  --pgl-line: rgba(251,238,243, 0.08);
  --pgl-edge: rgba(251,238,243, 0.16);
  --pgl-red: #d6034f;
  --pgl-red-deep: #8d073e;
  --pgl-red-hot: #f5035f;
  --pgl-trust: #fbbf24;
  --pgl-cardbg: linear-gradient(180deg, rgba(42,18,32, 0.94), rgba(24,10,18, 0.95));
  --pgl-cardelev: inset 0 1px 0 rgba(251,238,243, 0.055), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pgl header.nav.scrolled { background: rgba(18,6,12, 0.94); }
.pgl #pgl-scrim { background: radial-gradient(130% 90% at 50% 36%, rgba(18,6,12, 0.55), rgba(18,6,12, 0.9)); }

/* ── brand ─────────────────────────────────────────────── */
.sw-mark {
  display: inline-block;
  flex-shrink: 0;
  width: 30px;
  height: 24px;
  background: url(/brand/binder-mark.svg) center / contain no-repeat;
}
@media (min-width: 640px) { .sw-mark { width: 35px; height: 28px; } }
.pgl .brand { display: inline-flex; align-items: center; gap: 10px; }
.sw-wordmark { font-size: 19px; }
@media (min-width: 640px) { .sw-wordmark { font-size: 24px; } }

/* ── simulation chip ───────────────────────────────────── */
.sw-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1.5px solid var(--gold);
  background: rgba(251,191,36, 0.14);
  color: var(--gold-deep);
  font: 700 9.5px/1 var(--sw-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sw-mode-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
[data-theme="dark"] .sw-mode-chip,
.pgl .sw-mode-chip { color: var(--gold); }
.sw-mode-chip[hidden] { display: none; }
@media (max-width: 420px) { [data-sw-header] .sw-mode-chip { font-size: 0; gap: 0; padding: 0 7px; } }

.pgl header.nav .sw-nav-wallet { display: none; }
@media (min-width: 1100px) { .pgl header.nav .sw-nav-wallet { display: inline-flex; } }
[data-sw-wallet].sw-connected { text-transform: none; }

/* inner pages: keep the footer clear of the fixed mobile tab bar */
@media (max-width: 1239px) {
  body[data-sw-page]:not([data-sw-page="index"]) [data-sw-footer] { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ── wallet menu / sheet / toast ───────────────────────── */
.sw-pop {
  position: fixed;
  z-index: 90;
  min-width: 240px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--sw-edge);
  background: var(--sw-panel);
  color: var(--sw-cream);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  font: 500 13px/1.4 var(--sw-body);
}
.sw-pop h4 { margin: 4px 8px 8px; font: 700 10px/1 var(--sw-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-dim); }
.sw-pop button,
.sw-pop a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sw-pop button:hover,
.sw-pop a:hover { background: rgba(245,3,95, 0.1); }
.sw-pop .sw-pop__addr { padding: 6px 10px 10px; font: 600 12px/1.3 var(--sw-mono); color: var(--sw-accent-hot); word-break: break-all; }
.sw-pop .sw-pop__note { padding: 4px 10px 8px; color: var(--sw-dim); font-size: 12px; }
.sw-pop img { width: 22px; height: 22px; border-radius: 6px; }

.sw-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  max-height: 80vh;
  overflow: auto;
  padding: 18px 18px calc(84px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sw-edge);
  border-radius: 18px 18px 0 0;
  background: var(--sw-panel);
  color: var(--sw-cream);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.28s;
}
.sw-sheet.open { transform: none; visibility: visible; transition-delay: 0s; }
.sw-sheet a { display: flex; min-height: 46px; align-items: center; border-bottom: 1px solid var(--sw-line); color: inherit; text-decoration: none; font: 600 16px/1 var(--sw-body); }
.sw-sheet h4 { margin: 14px 0 4px; font: 700 10px/1 var(--sw-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-dim); }

.sw-toasts { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
@media (max-width: 1239px) { .sw-toasts { bottom: 76px; } }
.sw-toast {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--sw-edge);
  background: var(--sw-panel);
  color: var(--sw-cream);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  font: 500 13px/1.45 var(--sw-body);
  animation: sw-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-toast--ok { border-color: rgba(245,3,95, 0.5); }
.sw-toast--err { border-color: rgba(255, 92, 122, 0.55); }
@keyframes sw-toast-in { from { opacity: 0; transform: translateY(8px); } }

.sw-simtx {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px dashed currentColor;
  font: 600 10px/1.5 var(--sw-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* sw-focus: one brand focus ring for keyboard users everywhere */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #f5035f;
  outline-offset: 2px;
}

/* ── utilities the precompiled Tailwind build lacks ──── */
.border-paper-line { border-color: var(--paper-line); }
.text-ink-mute { color: var(--ink-mute); }

/* scroll reveal for inner pages (the home page defines its own under .pgl) */
body:not(:has(.pgl)) .rv { opacity: 0; transform: translateY(14px); }
body:not(:has(.pgl)) .rv.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .sw-sheet, .sw-toast { transition: none; animation: none; }
  .rv, .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── inner pages in dark mode (palettes with inner="dark") ─────────────────────
   The crawled inner pages were built light: cream surfaces, ink text, ink borders and
   2px ink offset shadows. Here the surface tokens become dark and the text tokens light,
   borders and offset shadows turn brand pink, and genuinely dark blocks (bg-ink sections,
   the footer, data-theme="dark") get the original mapping back so their light text stays light.
   strategies + market were dark pages from the start, so they are left alone. */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) {
  --cream: #12060c;
  --cream-2: #1e0c17;
  --cream-3: #2a1220;
  --color-cream: #12060c;
  --color-cream-2: #1e0c17;
  --color-cream-3: #2a1220;
  --ink: #fbeef3;                                /* page code uses var(--ink) for text: keep it light */
  --ink-soft: #d9b3c4;
  --ink-mute: rgba(251,238,243, 0.72);
  --ink-faint: rgba(251,238,243, 0.24);
  --paper-line: rgba(214,3,79, 0.22);
  --color-ink: #fbeef3;                          /* text-ink / bg-ink / border-ink */
  --color-ink-soft: #d9b3c4;
  --sw-surface-rgb: 18,6,12;
  background: #12060c;
  color: #fbeef3;
}
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .border-ink { border-color: rgba(214,3,79, 0.55); }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .border-ink\/15,
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .border-ink\/10 { border-color: rgba(214,3,79, 0.2); }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-cream-2 { background-color: #1e0c17; }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-cream-3 { background-color: #2a1220; }

/* the crawl's brutalist 2px offset shadows + ink borders go brand pink instead of white */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [class*="shadow-[2px_2px_0_var(--ink)]"] { box-shadow: 2px 2px 0 #f5035f; }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [class*="shadow-[3px_3px_0_var(--ink)]"] { box-shadow: 3px 3px 0 #f5035f; }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [class*="shadow-[4px_4px_0_var(--ink)]"] { box-shadow: 4px 4px 0 #f5035f; }

/* blocks that were dark on the light page keep the original token mapping */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-ink,
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [data-sw-footer],
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [data-theme="dark"] {
  --color-ink: #0b0407;
  --color-ink-soft: #2a1220;
  --color-cream: #fbeef3;
  --color-cream-2: #f3dbe5;
  --color-cream-3: #d9b3c4;
  --cream: #fbeef3;
  --cream-2: #f3dbe5;
  --cream-3: #d9b3c4;
  --ink: #0b0407;
  --ink-mute: rgba(251,238,243, 0.72);
  --paper-line: rgba(251,238,243, 0.1);
}
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-ink { box-shadow: inset 0 0 0 1px rgba(214,3,79, 0.18); }

/* pink buttons keep light text */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-red,
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-red-deep {
  --color-cream: #ffffff;
  --cream: #ffffff;
  color: #ffffff;
}

/* the header sits on the dark surface with a pink rule */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [data-sw-header] { border-bottom-color: rgba(214,3,79, 0.45); }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [data-sw-header] .sw-wordmark { text-shadow: none !important; }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .pg-mobile-tabbar nav { background: #1e0c17; border-top-color: rgba(214,3,79, 0.45); }

/* a little more pink: section eyebrows and links */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .text-red { color: #f5035f; }
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) main a:not([class]):hover { color: #f5035f; }
::selection { background: rgba(214,3,79, 0.45); color: #fff; }

/* light cards that sat inside dark blocks become dark panels with pink edges */
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-ink .bg-cream,
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) .bg-ink .bg-cream-2,
body[data-sw-page]:not([data-sw-page="index"]):not([data-sw-page="strategies"]):not([data-sw-page="market"]) [data-theme="dark"] .bg-cream {
  background-color: #1e0c17;
  --color-ink: #fbeef3;
  --ink: #fbeef3;
  color: #fbeef3;
}