/* ==========================================================================
   teaps-theme — navy/blue palette ported onto the Quoin clone.
   Appended last so it wins over the inline :root above.

   Quoin uses --ink and --paper as an OPPOSING PAIR (ink is text on paper, and
   also the fill of inverted sections where paper becomes the text). So they are
   swapped together: every contrast relationship in the original survives, it
   just flips from dark-on-cream to white-on-navy.
   ========================================================================== */

:root{
  /* page surfaces */
  --paper:      #081735;
  --paper-2:    #0A1A3D;
  --cream:      #0A1A3D;

  /* the opposite of the surface: text, and the fill of inverted cards */
  --ink:        #FFFFFF;
  --ink-2:      #E4ECF8;
  --f-ink:      #FFFFFF;
  --f-ink-soft: #8EA3C8;
  --muted:      #8EA3C8;

  /* accent: teaps sky blue in place of Quoin lime */
  --lime:       #7ECBFF;
  --lime-deep:  #3F7FF2;
  --lime-soft:  rgba(126,203,255,.14);

  /* hairlines, retuned for a dark surface */
  --line:       rgba(255,255,255,.10);
  --line-dark:  rgba(255,255,255,.22);

  /* block palette, also used by teaps-blocks.js */
  --tp-bg:      #081735;
  --tp-sky:     #7ECBFF;
  --tp-blue:    #3F7FF2;
  --tp-deep:    #0C2A7A;
  --tp-coral:   #FF7A6B;
}

html, body{ background: var(--paper); color: var(--ink); }

/* Literal brand hexes that bypass the tokens. */
[style*="#8BE000"], [style*="#8be000"]{ color: var(--lime) !important; }

/* 58 borders resolved to var(--ink): solid white on navy is far too loud, so
   they are softened to the same hairline the rest of the dark theme uses. */
*{ border-color: var(--line-dark); }

/* Inverted blocks keep working: a white fill needs navy text back on top. */
[style*="background:var(--ink)"], [style*="background: var(--ink)"]{ color: var(--paper) !important; }

::selection{ background: var(--lime); color: var(--paper); }

/* ---- the animated gutter ---- */
#tp-blocks{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#tp-blocks span{ position: absolute; display: block; will-change: transform, height; }

@media (prefers-reduced-motion: reduce){
  #tp-blocks span{ transition: none !important; }
}

/* --------------------------------------------------------------------------
   The --ink conflict.

   Quoin uses --ink for BOTH text and the fill of its dark cards. Flipping it to
   white fixes the text and turns every one of those cards white, which left
   white text sitting on white. One variable cannot hold both roles, so the 21
   rules that fill with var(--ink) are split by intent instead.
   -------------------------------------------------------------------------- */

:root{ --tp-surface: #0C1F47; --tp-surface-2: #12306E; }

/* Large surfaces: these were dark cards on a cream page, so they stay dark. */
.marquee, .md-tile, .settle-frame, .honest, .feed, .simbar, .toast{
  background: var(--tp-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-dark) !important;
}

/* Small solid marks: white on navy is correct here and reads as teaps. */
.wallet-btn .dot, .burger span, .bar i{
  background: var(--ink) !important;
}

/* Inverted controls: white fill needs dark text, like teaps' LAUNCH APP. */
.x-btn, .social-icon, .loop-btn,
.btn-ghost:hover, .modal-close:hover, .ca-chip:hover,
.sc-act button:hover:not([disabled]),
.footer-subscribe-row .k-btn:hover{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: transparent !important;
}
.x-btn svg, .social-icon svg, .loop-btn svg{ fill: var(--paper); stroke: var(--paper); }

/* Anything nested in a dark surface inherits light text again. */
.marquee *, .md-tile *, .settle-frame *, .honest *, .feed *, .simbar *{
  border-color: var(--line-dark);
}

/* The accent stays legible on navy. */
.stock-rate.up, .up{ color: #8CFFA7 !important; }
.stock-rate.down, .down, .loss{ color: var(--tp-coral) !important; }

/* Sections filled with the page colour are made transparent so the fixed block
   layer below shows through. Body already paints the same navy, so nothing
   changes visually except that the gutter becomes visible, as on teaps. */
main, main > section, .wrap, .hero, .hero-wrap{ background: transparent !important; }
#tp-blocks{ z-index: 0; }
main, header, footer, .nav{ position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Two hero surfaces resolved to near-opaque white once --ink flipped: a 480px
   glow that read as a grey cloud, and the vault card, which washed its own text
   out. Both are pinned to the blue set instead.
   -------------------------------------------------------------------------- */
.hero-blob.b3{ background: rgba(63,127,242,.30) !important; }
.hero-blob{ mix-blend-mode: screen; }

.hero-glass{
  background: rgba(12,31,71,.74) !important;
  border: 1px solid var(--line-dark) !important;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  color: var(--ink) !important;
}
.hero-glass *{ color: inherit; }
.hero-glass .muted, .hero-glass .dim{ color: var(--muted) !important; }

/* --------------------------------------------------------------------------
   White hover fills.

   On the cream original, `background:#fff` on hover was a gentle lift. On navy
   it flashes, and .step keeps its number white, so the number vanished mid-hover.
   Two of these also set color:var(--ink), which is now white on white.
   Replaced with a dim sky wash that lifts the card without hiding anything.
   -------------------------------------------------------------------------- */
.step:hover{
  background: rgba(126,203,255,.10) !important;
  border-color: rgba(126,203,255,.34) !important;
}
.step:hover .num, .step:hover .n, .step:hover h3{ color: var(--lime) !important; }

.social-icon:hover, .ca-chip.is-pending:hover{
  background: rgba(126,203,255,.14) !important;
  color: var(--ink) !important;
  border-color: rgba(126,203,255,.34) !important;
}
.social-icon:hover svg{ fill: var(--lime); stroke: var(--lime); }

/* --------------------------------------------------------------------------
   The remaining literal `background:#fff` panels, same bug as .step:hover.
   Split by role rather than blanket-converted: teaps genuinely does use white
   for small controls (LAUNCH APP, BUY TEAPS), just never for content panels.
   -------------------------------------------------------------------------- */

/* Content panels -> navy surface, light text. */
.stock-card, .vault-card, .app-panel, .app-tabs, .sc, .settle-pot,
.wallet-opt, .footer-right, .footer-subscribe-row, #settlement{
  background: var(--tp-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line-dark) !important;
}
.stock-card *, .vault-card *, .app-panel *, .app-tabs *, .sc *,
.settle-pot *, .wallet-opt *, .footer-right *, .footer-subscribe-row *{
  border-color: var(--line-dark);
}

/* Small controls stay white, but must carry dark text to stay readable. */
.hero-chip, .ca-chip, .btn, .tk, .footer-logo-mark{
  color: var(--paper) !important;
}
.hero-chip svg, .ca-chip svg, .btn svg, .tk svg{ fill: var(--paper); stroke: var(--paper); }

/* The primary CTA keeps the sky accent rather than plain white. */
.btn-primary, .btn.primary{
  background: var(--lime) !important;
  color: var(--paper) !important;
  border-color: transparent !important;
}

/* Ghost buttons are transparent, so the dark text meant for FILLED controls
   above makes them vanish. They take light text and a hairline instead. */
.btn-ghost, .btn.btn-ghost, a.btn-ghost{
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-dark) !important;
}
.btn-ghost svg{ fill: var(--ink); stroke: var(--ink); }
.btn-ghost:hover{
  background: rgba(126,203,255,.10) !important;
  border-color: rgba(126,203,255,.34) !important;
  color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   The Wall.

   This section was already dark in the original, so its text was cream ON dark.
   The alpha rule that mapped cream mistook that text for a surface fill and sent
   it to navy, which made it vanish against the section's own dark background.
   The literals are repaired in the source; these rules cover the ones that come
   from var(--paper), which is now the page navy.
   -------------------------------------------------------------------------- */
.dark, #wall, .dark *, #wall *{ color: var(--ink); }

#wall .muted, #wall .dim, #wall small, .dark .lede,
#wall td:not(:first-child), #wall .sub{ color: var(--muted) !important; }

/* Row labels down the side of the pyramid. */
.pyramid-rails span{ color: var(--muted) !important; }
.pyramid-rails span.cap{ color: var(--lime) !important; }

/* Table: header on a tinted bar, body light, numbers on the accent. */
#wall table, #wall .wall-table{ color: var(--ink) !important; }
#wall thead th, #wall .thead, #wall .t-head{
  color: var(--lime) !important;
  background: rgba(126,203,255,.07) !important;
}
#wall tbody tr{ border-color: var(--line-dark) !important; }
#wall .weight, #wall .mult{ color: var(--lime) !important; }

/* Pyramid stones keep their own fills; only the two marked states are accented. */
.pyramid .stone.yours{ background: var(--lime) !important; }
.pyramid .stone.sel{ outline: 2px solid var(--lime) !important; }

/* Legend under the pyramid. */
.legend, .legend *{ color: var(--muted) !important; }

/* The pyramid is an SVG built at runtime, so its stones carry inline fill
   attributes that no colour pass can reach. Attribute selectors catch them
   whether they come from the markup or from the script. */
.pyramid .stone[fill="#252820"], .pyramid rect[fill="#252820"]{ fill: #15294D !important; }
.pyramid .stone[fill="#3D4F14"], .pyramid rect[fill="#3D4F14"]{ fill: #3F7FF2 !important; }
.pyramid .stone.yours{ fill: var(--lime) !important; }
.pyramid .stone.sel{ stroke: var(--lime) !important; stroke-width: 1.5 !important; }

/* --------------------------------------------------------------------------
   Footer and app tabs.

   The footer redeclares --f-ink on its own container, so the :root override at
   the top of this file never reached it and its text stayed near-black. The app
   tab buttons carry their own colour, which the .app-tabs rule could not touch.
   -------------------------------------------------------------------------- */
.site-footer, footer.site-footer, .site-footer *{
  --f-ink: #FFFFFF;
  --f-ink-soft: #8EA3C8;
}
.site-footer, .site-footer .brand-name, .site-footer a, .site-footer span,
.site-footer p, .site-footer li{ color: var(--ink) !important; }
.site-footer .muted, .site-footer .dim, .site-footer small{ color: var(--muted) !important; }
.site-footer a:hover{ color: var(--lime) !important; }

/* The logo lockup sits on a sky chip, so it needs dark text there. */
.footer-logo-mark, .footer-logo-name{ color: var(--paper) !important; }

/* Tab strip: inactive tabs muted, the active one on the accent. */
.app-tabs button, .app-tabs a, .app-tabs .tab{
  color: var(--muted) !important;
  background: transparent !important;
}
.app-tabs button:hover, .app-tabs a:hover{ color: var(--ink) !important; }
.app-tabs button.is-active, .app-tabs button[aria-selected="true"],
.app-tabs .tab.is-active, .app-tabs a.is-active{
  color: var(--paper) !important;
  background: var(--lime) !important;
}

/* "Bondcourse" is twice the length of the old wordmark, which squeezed the nav
   enough to wrap "How it works" and "The Wall" onto two lines. */
.nav-links{ flex-wrap: nowrap !important; }
.nav-links a, .nav-links li{ white-space: nowrap !important; }
.nav-in{ gap: 1.15rem !important; }
@media (max-width: 1180px){
  .nav-links{ gap: 1.1rem !important; }
  .logo-word{ font-size: .98em; }
}

/* The mark is white-on-navy artwork, so it gets a chip with a sky keyline —
   the same lockup as the banner, so profile and site read as one identity. */
.logo-mark{ border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(126,203,255,.22); }
.footer-logo-mark{ border-radius: 9px !important; border: 1px solid rgba(126,203,255,.25) !important; background: transparent !important; }