/* ---------------------------------------------------------------------------
   EarnAPYon theme
   Light is the default. Dark is opt-in via <html data-theme="dark">.

   The pages were built with hardcoded Tailwind arbitrary colours such as
   text-[#8e9192]. Rather than rewrite every occurrence across six pages plus
   the JS that injects table rows, this file re-points those exact utility
   classes at CSS variables. One rule per class, and the variables swap by
   theme. It also means JS-generated markup themes itself for free.

   Selectors are prefixed with :root purely to outrank the Tailwind CDN, which
   injects its own <style> at runtime and would otherwise win on equal
   specificity. Class names are case-sensitive and must match the HTML exactly.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --bg:             #ffffff;
  --surface:        #f6f6f7;  /* cards */
  --surface-alt:    #f0f0f2;  /* row hover, gradient stop */
  --surface-nav:    #ffffff;
  --surface-footer: #fafafa;

  --border:         #e4e4e7;
  --border-strong:  #d4d4d8;
  --track:          #e4e4e7;  /* range slider track */

  --text:           #18181b;
  --text-2:         #3f3f46;
  --text-3:         #6b7280;

  /* Buttons that invert against the page */
  --btn-bg:         #18181b;
  --btn-fg:         #ffffff;

  /* Accents. "text" variants are darkened so they stay legible on white.
     "solid" variants stay vivid because they sit behind dark text. */
  --green-text:     #15803d;
  --green-solid:    #22c55e;
  --green-tint-10:  rgba(21, 128, 61, 0.10);
  --green-tint-20:  rgba(21, 128, 61, 0.16);
  --green-tint-30:  rgba(21, 128, 61, 0.30);

  --yellow-text:    #a16207;
  --yellow-solid:   #facc15;
  --yellow-tint-10: rgba(161, 98, 7, 0.10);
  --yellow-tint-30: rgba(161, 98, 7, 0.30);

  --red-text:       #dc2626;
  --orange-text:    #c2410c;
  --red-tint-10:    rgba(220, 38, 38, 0.10);
  --red-tint-30:    rgba(220, 38, 38, 0.30);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #000000;
  --surface:        #1C1C1E;
  --surface-alt:    #1c1b1b;
  --surface-nav:    #141313;
  --surface-footer: #0e0e0e;

  --border:         #38383A;
  --border-strong:  #444748;
  --track:          #46464b;

  --text:           #e5e2e1;
  --text-2:         #c4c7c8;
  --text-3:         #8e9192;

  --btn-bg:         #ffffff;
  --btn-fg:         #000000;

  --green-text:     #30D158;
  --green-solid:    #30D158;
  --green-tint-10:  rgba(48, 209, 88, 0.10);
  --green-tint-20:  rgba(48, 209, 88, 0.20);
  --green-tint-30:  rgba(48, 209, 88, 0.30);

  --yellow-text:    #FFD60A;
  --yellow-solid:   #FFD60A;
  --yellow-tint-10: rgba(255, 214, 10, 0.10);
  --yellow-tint-30: rgba(255, 214, 10, 0.30);

  --red-text:       #FF453A;
  --orange-text:    #FF9F0A;
  --red-tint-10:    rgba(255, 69, 58, 0.10);
  --red-tint-30:    rgba(255, 69, 58, 0.30);
}

/* Base ------------------------------------------------------------------- */

:root body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

:root .glass-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* bitcoin.html and calculators.html use .glass-panel; calculators gives it a
   translucent fill behind a backdrop blur, so keep that translucent. */
:root .glass-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

:root .hairline-divider {
  border-bottom-color: var(--border) !important;
  background: var(--border) !important;
}

:root .post-card:hover { border-color: var(--text-3) !important; }
:root .neon-border-hover:hover { border-color: var(--text) !important; box-shadow: none; }

/* Tailwind config palette (index, bitcoin, calculators define their own) ---- */

:root .bg-background                { background-color: var(--bg); }
:root .bg-surface                   { background-color: var(--surface-nav); }
:root .bg-surface-container-lowest  { background-color: var(--surface-footer); }
:root .bg-surface-container-low     { background-color: var(--surface-alt); }
:root .bg-surface-container-high    { background-color: var(--surface); }
:root .bg-surface-container-highest { background-color: var(--surface); }
:root .bg-outline-variant           { background-color: var(--border-strong); }
:root .hover\:bg-outline-variant:hover { background-color: var(--border-strong); }
:root .bg-primary                   { background-color: var(--btn-bg); }

:root .text-primary            { color: var(--text); }
:root .hover\:text-primary:hover { color: var(--text); }
:root .text-on-surface         { color: var(--text); }
:root .text-on-background      { color: var(--text); }
:root .text-on-surface-variant { color: var(--text-2); }
:root .text-outline            { color: var(--text-3); }
:root .hover\:text-on-surface:hover { color: var(--text); }
:root .text-surface            { color: var(--btn-fg); }

:root .border-outline-variant     { border-color: var(--border-strong); }
:root .border-outline-variant\/30 { border-color: var(--border); }

::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }

/* Tailwind named colours used for emphasis and inverted buttons ----------- */

:root .text-white  { color: var(--text); }
:root .text-black  { color: var(--btn-fg); }
:root .bg-white    { background-color: var(--btn-bg); }
:root .border-white{ border-color: var(--text); }
:root .hover\:border-white:hover { border-color: var(--text); }
:root .hover\:text-white:hover   { color: var(--text); }

/* Text -------------------------------------------------------------------- */

:root .text-\[\#8e9192\] { color: var(--text-3); }
:root .text-\[\#c4c7c8\] { color: var(--text-2); }
:root .text-\[\#e5e2e1\] { color: var(--text); }
:root .text-\[\#30D158\] { color: var(--green-text); }
:root .text-\[\#FFD60A\] { color: var(--yellow-text); }
:root .text-\[\#FF453A\] { color: var(--red-text); }

/* Surfaces ---------------------------------------------------------------- */

:root .bg-\[\#000\]     { background-color: var(--bg); }
:root .bg-\[\#0e0e0e\]  { background-color: var(--surface-footer); }
:root .bg-\[\#141313\]  { background-color: var(--surface-nav); }
:root .bg-\[\#1C1C1E\]  { background-color: var(--surface); }
:root .bg-\[\#1c1b1b\]  { background-color: var(--surface-alt); }
:root .hover\:bg-\[\#1c1b1b\]:hover { background-color: var(--surface-alt); }
:root .bg-\[\#444748\]  { background-color: var(--border-strong); }
:root .bg-\[\#46464b\]  { background-color: var(--track); }

/* Borders ----------------------------------------------------------------- */

:root .border-\[\#38383A\] { border-color: var(--border); }
:root .border-\[\#444748\] { border-color: var(--border-strong); }
:root .divide-\[\#38383A\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }

/* Accent fills and tints -------------------------------------------------- */

:root .bg-\[\#30D158\]      { background-color: var(--green-solid); }
:root .bg-\[\#FFD60A\]      { background-color: var(--yellow-solid); }
:root .accent-\[\#30D158\]  { accent-color: var(--green-solid); }

:root .bg-\[\#30D158\]\/10  { background-color: var(--green-tint-10); }
:root .bg-\[\#30D158\]\/20  { background-color: var(--green-tint-20); }
:root .bg-\[\#FFD60A\]\/10  { background-color: var(--yellow-tint-10); }
:root .bg-\[\#FF453A\]\/10  { background-color: var(--red-tint-10); }

:root .border-\[\#30D158\]\/30 { border-color: var(--green-tint-30); }
:root .border-\[\#FFD60A\]\/30 { border-color: var(--yellow-tint-30); }
:root .border-\[\#FF453A\]\/30 { border-color: var(--red-tint-30); }

/* Gradients --------------------------------------------------------------- */

:root .from-\[\#1c1b1b\] { --tw-gradient-from: var(--surface-alt) var(--tw-gradient-from-position); }
:root .to-\[\#000\]      { --tw-gradient-to:   var(--bg) var(--tw-gradient-to-position); }

/* Article body (post.html) ------------------------------------------------ */

:root #post-body h2, :root #post-body strong { color: var(--text); }
:root #post-body h3 { color: var(--text); }
:root #post-body p, :root #post-body ul, :root #post-body ol, :root #post-body td { color: var(--text-2); }
:root #post-body a  { color: var(--text); }
:root #post-body blockquote { border-left-color: var(--border-strong); color: var(--text-3); }
:root #post-body code { background: var(--surface); color: var(--green-text); }
:root #post-body pre  { background: var(--surface); border-color: var(--border); }
:root #post-body th   { background: var(--surface); color: var(--text); border-bottom-color: var(--border); }
:root #post-body td   { border-bottom-color: var(--border); }

/* Disclosures page -------------------------------------------------------- */

:root .prose-block h2 { color: var(--text); }
:root .prose-block p, :root .prose-block ul { color: var(--text-2); }
:root .prose-block strong { color: var(--text); }

/* Theme toggle ------------------------------------------------------------ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); background: var(--surface); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
