/* =================================================================
   THEME UNIFICATION — "The Quiet Vault", one theme for every page
   -----------------------------------------------------------------
   Each page used to load its own *-dark-institutional.css and had
   drifted: two different golds (#C9A74E vs #D4A752), three navy text
   colours, four primary-button paradigms (gold-gradient / ghost /
   navy-fill / white-fill), radii of 6/8/16px, and admin even used a
   different page background. This file loads LAST on every page and
   pins all of that to a single canonical spec with !important so the
   product looks identical end to end.

   Canonical tokens:
     gold        #C9A74E   (the only gold; hover #d4b863)
     navy        #1B2A41   (page base, text-on-gold)
     navy-deep   #0f1a2a   (gradient end)
   ================================================================= */

:root {
  --cc-gold: #C9A74E;
  --cc-gold-hover: #d4b863;
  --cc-navy: #1B2A41;
  --cc-navy-deep: #0f1a2a;
  --cc-page-bg: linear-gradient(135deg, #1B2A41 0%, #0f1a2a 100%);
  --cc-surface: rgba(255, 255, 255, 0.05);
  --cc-surface-border: rgba(255, 255, 255, 0.10);
  --cc-radius-card: 16px;
  --cc-radius-btn: 8px;

  /* Re-point every legacy gold alias at the single brand gold #C9A74E.
     style.css shipped --castle-gold: #D4A752 (the "logo gold"), which is
     why backtest CTAs and various accents drifted to a different gold.
     Overriding the tokens here fixes everything that flows through them. */
  --castle-gold: #C9A74E !important;
  --castle-gold-light: #d4b863 !important;
  --rich-gold: #C9A74E !important;
  --trading-gold: #C9A74E !important;
}

/* ----------------------------------------------------------------
   1. PAGE BACKGROUND — same navy gradient everywhere (admin used a
   flat #0a0e1a; pin it to the gradient like every other page).
   ---------------------------------------------------------------- */
html {
  background: var(--cc-page-bg) !important;
  min-height: 100%;
}
/* Body gets the same gradient but NOT background-attachment:fixed, so on
   tall pages the navy still covers the full scroll height (a fixed bg
   leaves below-the-fold sections unpainted). html carries a fallback. */
body {
  background: var(--cc-page-bg) !important;
}

/* ----------------------------------------------------------------
   2. PRIMARY CTA — flat gold, navy text, 8px radius, weight 700.
   No AI gradient, no heavy glow. One look for the main action.
   ---------------------------------------------------------------- */
/* Tripled-class selectors (specificity 0,3,0) so this beats even the
   per-page `button[type="submit"].btn-primary` (0,2,1) and
   `.btn.btn-primary` (0,2,0) gradient rules; loading last breaks ties. */
.castle-btn-primary.castle-btn-primary.castle-btn-primary,
.castle-btn-gold.castle-btn-gold.castle-btn-gold,
.btn-primary.btn-primary.btn-primary,
.btn-trading-primary.btn-trading-primary.btn-trading-primary,
.btn-plan.btn-plan.btn-plan,
.hero-cta.hero-cta.hero-cta,
.btn-gold.btn-gold.btn-gold {
  background: var(--cc-gold) !important;
  background-image: none !important;
  color: var(--cc-navy) !important;
  border: 1px solid var(--cc-gold) !important;
  border-radius: var(--cc-radius-btn) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.castle-btn-primary.castle-btn-primary.castle-btn-primary i,
.castle-btn-gold.castle-btn-gold.castle-btn-gold i,
.btn-primary.btn-primary.btn-primary i,
.btn-trading-primary.btn-trading-primary.btn-trading-primary i,
.btn-plan.btn-plan.btn-plan i,
.hero-cta.hero-cta.hero-cta i { color: var(--cc-navy) !important; }

.castle-btn-primary.castle-btn-primary.castle-btn-primary:hover:not(:disabled),
.castle-btn-gold.castle-btn-gold.castle-btn-gold:hover:not(:disabled),
.btn-primary.btn-primary.btn-primary:hover:not(:disabled),
.btn-trading-primary.btn-trading-primary.btn-trading-primary:hover:not(:disabled),
.btn-plan.btn-plan.btn-plan:hover:not(:disabled),
.hero-cta.hero-cta.hero-cta:hover:not(:disabled),
.btn-gold.btn-gold.btn-gold:hover:not(:disabled) {
  background: var(--cc-gold-hover) !important;
  border-color: var(--cc-gold-hover) !important;
  color: var(--cc-navy) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------
   3. SECONDARY / GHOST — transparent, gold outline, gold text.
   Fills gold on hover. One look for the secondary action.
   ---------------------------------------------------------------- */
.castle-btn-secondary.castle-btn-secondary,
.castle-btn-outline.castle-btn-outline,
.btn-secondary.btn-secondary,
.btn-outline-gold.btn-outline-gold,
.btn-outline-primary.btn-outline-primary,
.btn-ghost.btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--cc-gold) !important;
  border: 1px solid rgba(201, 167, 78, 0.55) !important;
  border-radius: var(--cc-radius-btn) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.castle-btn-secondary.castle-btn-secondary:hover:not(:disabled),
.castle-btn-outline.castle-btn-outline:hover:not(:disabled),
.btn-secondary.btn-secondary:hover:not(:disabled),
.btn-outline-gold.btn-outline-gold:hover:not(:disabled),
.btn-outline-primary.btn-outline-primary:hover:not(:disabled),
.btn-ghost.btn-ghost:hover:not(:disabled) {
  background: var(--cc-gold) !important;
  color: var(--cc-navy) !important;
  border-color: var(--cc-gold) !important;
}

/* ----------------------------------------------------------------
   4. GOLD ACCENT NORMALISATION — kill the legacy gold variants so a
   single #C9A74E reads across the app (badges, links, icons that
   still carry #D4AF37 / #E8B84B / #D4A752 / #E6C97A).
   ---------------------------------------------------------------- */
[style*="#E8B84B"], [style*="#D4AF37"], [style*="#E6C97A"] { /* inline fallbacks handled per-page */ }

/* ----------------------------------------------------------------
   5b. REVEAL SAFETY — the marketing pages gate whole sections behind
   .animate-fade-up (opacity:0) with no .js fallback and no failsafe, so
   the body goes blank if the scroll observer never reaches an element
   (headless, SEO, JS error). Make reveal a true enhancement: visible by
   default, hidden only under html.js, with a 2.4s failsafe.
   ---------------------------------------------------------------- */
.animate-fade-up { opacity: 1; transform: none; }
.js .animate-fade-up:not(.revealed):not(.visible) {
  opacity: 0;
  transform: translateY(30px);
  animation: cc-fade-failsafe 0.01s linear 2.4s forwards;
}
.js .animate-fade-up.revealed,
.js .animate-fade-up.visible { opacity: 1; transform: none; animation: none; }
@keyframes cc-fade-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ----------------------------------------------------------------
   5c. NO GRADIENT TEXT — banned, and it renders blank on some engines.
   Hero + section headings are solid white; gold lives in the accents.
   ---------------------------------------------------------------- */
.hero-title,
.hero-main-title,
.section-title,
.cta-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------------------
   6. CARD / PANEL SURFACE — one tonal surface + hairline + radius.
   ---------------------------------------------------------------- */
.content-section,
.controls-card,
.pricing-card,
.stat-box,
.chart-card,
.castle-card,
.dashboard-card,
.section-card,
.value-card {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-surface-border) !important;
  border-radius: var(--cc-radius-card) !important;
}

/* Full-bleed marketing section bands should be transparent (show the
   one navy page background), not a lighter tinted block that reads as a
   different theme from the rest of the page. */
.mission-vision-section,
.values-section,
.pricing-section,
.philosophy-section {
  background: transparent !important;
}

/* Kill the decorative gold accent-stripe (::before) some marketing cards
   paint along their top edge — banned repeated accent. */
.section-card::before,
.value-card::before,
.pricing-card::before,
.stat-box::before {
  display: none !important;
}

/* Elevation is tonal, not a jumpy translate: don't hover-lift cards. */
.section-card:hover,
.value-card:hover,
.pricing-card:hover,
.stat-box:hover {
  transform: none !important;
}