:root {
  --brand: #3a86cc;
  --brand-2: #5aa4e6;
  --brand-soft: #12233a;
  --ink: #eaf0f8;
  --ink-2: #b8c3d4;
  --muted: #8794a9;
  --line: #1e2a3e;
  --line-2: #2a3852;
  --white: #0b0f16;
  --cream: #151d2e;
  --cream-2: #1d2840;
  --sand: #273754;
  --page-bg: #0b0f16;

  /* Semantic finance palette */
  --pos: #22c07f;
  --pos-soft: #0f3324;
  --neg: #e5484d;
  --neg-soft: #3a1517;
  --warn: #f0b400;
  --warn-soft: #3a2a08;
  --premium: #a37bff;
  --premium-soft: #221a3a;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --maxw: 1680px;
  --gutter: clamp(20px, 3.5vw, 80px);
  --section-py: clamp(64px, 8vw, 140px);
}

[data-theme="light"] {
  --brand: #0d5a9e;
  --brand-2: #3a86cc;
  --brand-soft: #e6f0f9;
  --ink: #1a2540;
  --ink-2: #4b5875;
  --muted: #7a8598;
  --line: #e6ecf3;
  --line-2: #d3dbe6;
  --white: #ffffff;
  --cream: #f9f5ef;
  --cream-2: #f2ebdf;
  --sand: #e5d9c2;
  --page-bg: #ffffff;
  --hc-shadow: rgba(13, 90, 158, 0.14);
  --hc-shadow-active: rgba(13, 90, 158, 0.22);

  /* Semantic finance palette - light mode */
  --pos: #16a06a;
  --pos-soft: #e0f5eb;
  --neg: #cd2f34;
  --neg-soft: #fbe4e5;
  --warn: #b78200;
  --warn-soft: #fbf1d5;
  --premium: #7355d9;
  --premium-soft: #eee9fb;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Theme transition - applied briefly via JS class, removed after */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    background 0.35s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body>main {
  flex: 1 0 auto;
}

body>.site-footer {
  flex-shrink: 0;
}

/* Logo swap by theme - light variant shows on light mode, V3 dark on dark mode */
.brand-logo {
  display: block;
}

.brand-logo-light {
  display: none;
}

.brand-logo-dark {
  display: block;
}

[data-theme="light"] .brand-logo-light {
  display: block;
}

[data-theme="light"] .brand-logo-dark {
  display: none;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.theme-toggle:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

/* Light mode: white border disappears on white bg, so give it a soft grey border + shadow */
[data-theme="light"] .theme-toggle {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 10%, transparent);
}

[data-theme="light"] .theme-toggle:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 24%, transparent);
}

/* Push the theme toggle to the far right of .header-actions */
.header-actions .theme-toggle {
  order: 99;
  margin-left: 6px;
}

.theme-toggle .ti {
  width: 15px;
  height: 15px;
}

.theme-toggle .ti-sun {
  display: none;
}

.theme-toggle .ti-moon {
  display: block;
}

[data-theme="light"] .theme-toggle .ti-sun {
  display: block;
}

[data-theme="light"] .theme-toggle .ti-moon {
  display: none;
}