:root {
  --surface-0: #16130f;
  --surface-1: #1a1613;
  --surface-2: #211c19;
  --surface-3: #3A332D;
  --surface-raised: #211c19;
  --ink-primary: #FDFBF7;
  --ink-secondary: #D6CFC4;
  --ink-tertiary: #A8A29E;
  --ink-faint: #6F665C;
  --accent: #F59E0B;
  --accent-soft: #FCD34D;
  --accent-wash: rgba(245, 158, 11, 0.10);
  --accent-wash-strong: rgba(245, 158, 11, 0.18);
  --positive: #6FBF95;
  --positive-wash: rgba(31, 138, 91, 0.16);
  --info: #7AA2E3;
  --info-wash: rgba(0, 56, 168, 0.20);
  --danger: #E8897B;
  --panel-border: #3A332D;
  --shadow-card: 0 8px 24px -16px rgba(0,0,0,0.85);
  --shadow-elevated: 0 24px 48px -22px rgba(0,0,0,0.85);
}

/* Tesoro remap: dark-theme override for legacy light-theme pages.
   Load AFTER a page's own style block. Redefines the legacy design tokens
   above so any component built on them re-themes automatically; the rules
   below override components that used hardcoded light colors.
   Load IBM Plex Mono via a page link tag, not an at-import here. */

html, body { background: #16130f; }

.tesoro-ribbon {
  height: 5px; width: 100%;
  background: linear-gradient(90deg,#D52B1E 0 33.33%,#FFFFFF 33.33% 66.66%,#0038A8 66.66% 100%);
}

.nav {
  background: rgba(22,19,15,0.92) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #3A332D !important;
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-links a.active { color: #FCD34D !important; border-bottom-color: #F59E0B !important; }

.hero-banner {
  background: linear-gradient(180deg, #16130f 0%, #100E0C 100%) !important;
  border-bottom: 1px solid #3A332D;
}

.filter-btn.active { color: #1C1917 !important; }

.section-header { border-bottom-color: #3A332D !important; }

input, textarea, select { color: var(--ink-primary); }
input::placeholder, textarea::placeholder { color: #6B6258; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid #F59E0B; outline-offset: 2px;
}