/* Heritage AI — theme tokens (dark / light-warm / light-cool) */

/* ── Dark (default) ────────────────────────────────────────── */
:root,
html.theme-dark {
  --bg-primary:       #0B0F14;
  --bg-secondary:     #11171F;
  --bg-tertiary:      #1A2230;
  --bg-elevated:      #222C3C;
  --bg-footer:        #060A0F;
  --bg-header-blur:   rgba(11, 15, 20, 0.78);
  --bg-modal-backdrop: rgba(5, 8, 12, 0.7);
  --bg-security-deep: #0A0E13;

  --border-subtle: #1F2937;
  --border-strong: #2D3A4E;

  --text-primary:   #F5F7FA;
  --text-secondary: #9AA6B6;
  --text-tertiary:  #6B7888;

  --surface-recess: rgba(26, 34, 48, 0.45);
  --surface-input:  rgba(11, 15, 20, 0.6);
  --surface-quote:  rgba(17, 23, 31, 0.55);
  --surface-drawer: rgba(11, 15, 20, 0.95);
  --hover-overlay:  rgba(255, 255, 255, 0.04);

  --grid-line: rgba(45, 58, 78, 0.18);
  --plat-mockup-bg: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  --heritage-blue: #AFC2E8;
  --heritage-blue-soft: rgba(91, 143, 185, 0.12);
  --heritage-blue-line: rgba(91, 143, 185, 0.28);
}

html.theme-dark .hero-trust {
  background: var(--heritage-blue-soft);
}

/* ── Light warm (parchment / private-bank stationery) ──────── */
html.theme-light-warm {
  --bg-primary:       #F4EFE5;
  --bg-secondary:     #FBF7ED;
  --bg-tertiary:      #FFFFFF;
  --bg-elevated:      #FFFFFF;
  --bg-footer:        #2A2418;
  --bg-header-blur:   rgba(244, 239, 229, 0.82);
  --bg-modal-backdrop: rgba(26, 19, 10, 0.55);
  --bg-security-deep: #EDE5D4;

  --border-subtle: #E6DCC4;
  --border-strong: #CDBE9C;

  --text-primary:   #1A130A;
  --text-secondary: #5B4F3A;
  --text-tertiary:  #897C63;

  --surface-recess: rgba(26, 19, 10, 0.03);
  --surface-input:  #FFFFFF;
  --surface-quote:  rgba(255, 255, 255, 0.55);
  --surface-drawer: rgba(251, 247, 237, 0.97);
  --hover-overlay:  rgba(26, 19, 10, 0.04);

  --grid-line: rgba(26, 19, 10, 0.06);
  --plat-mockup-bg: linear-gradient(180deg, #15191F, #0B0F14);
}
html.theme-light-warm .ft { color: rgba(244, 239, 229, 0.72); }
html.theme-light-warm .ft .ft-link { color: rgba(244, 239, 229, 0.72); }
html.theme-light-warm .ft .ft-link:hover { color: var(--accent-hover); }
html.theme-light-warm .ft .ft-link-muted,
html.theme-light-warm .ft .ft-link-muted:hover { color: rgba(244, 239, 229, 0.38); }
html.theme-light-warm .ft .hd-wordmark { color: #F4EFE5; }
html.theme-light-warm .ft .ft-disc { color: rgba(244, 239, 229, 0.6); }
html.theme-light-warm .ft .ft-bottom { color: rgba(244, 239, 229, 0.5); }
html.theme-light-warm .ft .ft-lang button { color: rgba(244, 239, 229, 0.55); }
html.theme-light-warm .ft .ft-lang button.is-on { color: var(--accent-hover); }
html.theme-light-warm .ft .ft-col-title { color: var(--accent-hover); }
html.theme-light-warm .ft .mono-label { color: rgba(244, 239, 229, 0.55); }
html.theme-light-warm .ft .hairline {
  background: linear-gradient(90deg, transparent, rgba(244,239,229,0.15) 20%, rgba(244,239,229,0.15) 80%, transparent);
}

/* ── Light cool (institutional grey) ───────────────────────── */
html.theme-light-cool {
  --bg-primary:       #F2F4F7;
  --bg-secondary:     #FFFFFF;
  --bg-tertiary:      #F8FAFC;
  --bg-elevated:      #FFFFFF;
  --bg-footer:        #0E1419;
  --bg-header-blur:   rgba(242, 244, 247, 0.82);
  --bg-modal-backdrop: rgba(14, 20, 25, 0.6);
  --bg-security-deep: #E7EBF1;

  --border-subtle: #E1E5EB;
  --border-strong: #C1C8D2;

  --text-primary:   #0E141B;
  --text-secondary: #4A5462;
  --text-tertiary:  #7A8593;

  --surface-recess: rgba(14, 20, 25, 0.03);
  --surface-input:  #FFFFFF;
  --surface-quote:  rgba(255, 255, 255, 0.7);
  --surface-drawer: rgba(255, 255, 255, 0.97);
  --hover-overlay:  rgba(14, 20, 25, 0.04);

  --grid-line: rgba(14, 20, 25, 0.05);
  --plat-mockup-bg: linear-gradient(180deg, #15191F, #0B0F14);
}
html.theme-light-cool .ft { color: rgba(242, 244, 247, 0.75); }
html.theme-light-cool .ft .ft-link { color: rgba(242, 244, 247, 0.75); }
html.theme-light-cool .ft .ft-link:hover { color: var(--accent-hover); }
html.theme-light-cool .ft .ft-link-muted,
html.theme-light-cool .ft .ft-link-muted:hover { color: rgba(242, 244, 247, 0.4); }
html.theme-light-cool .ft .hd-wordmark { color: #F2F4F7; }
html.theme-light-cool .ft .ft-disc { color: rgba(242, 244, 247, 0.6); }
html.theme-light-cool .ft .ft-bottom { color: rgba(242, 244, 247, 0.5); }
html.theme-light-cool .ft .ft-lang button { color: rgba(242, 244, 247, 0.55); }
html.theme-light-cool .ft .ft-lang button.is-on { color: var(--accent-hover); }
html.theme-light-cool .ft .ft-col-title { color: var(--accent-hover); }
html.theme-light-cool .ft .mono-label { color: rgba(242, 244, 247, 0.55); }
html.theme-light-cool .ft .hairline {
  background: linear-gradient(90deg, transparent, rgba(242,244,247,0.15) 20%, rgba(242,244,247,0.15) 80%, transparent);
}

/* ── Product preview stages stay consistent in all themes ── */
.sec-diagram,
.plat-mockup {
  --bg-primary:     #0B0F14;
  --bg-secondary:   #11171F;
  --bg-tertiary:    #1A2230;
  --bg-elevated:    #222C3C;
  --border-subtle:  #1F2937;
  --border-strong:  #2D3A4E;
  --text-primary:   #F5F7FA;
  --text-secondary: #9AA6B6;
  --text-tertiary:  #6B7888;
  --surface-recess: rgba(26, 34, 48, 0.45);
}

/* ── Shared light-theme adjustments ────────────────────────── */
html.theme-light-warm,
html.theme-light-cool {
  /* Tone down the etched grid in hero on light surfaces */
}
html.theme-light-warm .hero::before,
html.theme-light-cool .hero::before { opacity: 0.7; }

/* Buttons keep gold; secondary button needs darker text on light */
html.theme-light-warm .btn-secondary,
html.theme-light-cool .btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html.theme-light-warm .btn-secondary:hover,
html.theme-light-cool .btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-tertiary);
}

/* Light themes: pricing card surface — give it warmth, not flat white */
html.theme-light-warm .pricing-card {
  background: linear-gradient(180deg, #FFFFFF, #FBF7ED);
  box-shadow: 0 20px 60px -20px rgba(26,19,10,0.18);
}
html.theme-light-cool .pricing-card {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
  box-shadow: 0 20px 60px -20px rgba(14,20,25,0.15);
}
html.theme-light-warm .pricing-seal,
html.theme-light-cool .pricing-seal { background: var(--bg-tertiary); }

/* Light themes: cards shouldn't have heavy elevated gradients */
html.theme-light-warm .card,
html.theme-light-cool .card,
html.theme-light-warm .card-elevated,
html.theme-light-cool .card-elevated {
  background: var(--bg-secondary);
}
html.theme-light-warm .how-card,
html.theme-light-cool .how-card,
html.theme-light-warm .problem-flow,
html.theme-light-cool .problem-flow,
html.theme-light-warm .seg-card,
html.theme-light-cool .seg-card {
  background: var(--bg-secondary);
}
html.theme-light-warm .problem-flow-step,
html.theme-light-cool .problem-flow-step {
  background: var(--surface-recess);
}
html.theme-light-warm .quote-card,
html.theme-light-cool .quote-card {
  background:
    repeating-linear-gradient(135deg,
      rgba(201,169,97,0.03) 0px, rgba(201,169,97,0.03) 1px,
      transparent 1px, transparent 12px),
    var(--surface-quote);
  border-color: var(--border-strong);
}

/* Product preview stages stay dark on all themes */
/* Wrap them in a darker stage when the surrounding section is light */
html.theme-light-warm .plat-mockup,
html.theme-light-cool .plat-mockup {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,0.18), transparent 70%),
    var(--plat-mockup-bg);
  border-bottom-color: var(--border-subtle);
}

/* Sec-diagram stays dark too — it's a product diagram */
html.theme-light-warm .sec-diagram,
html.theme-light-cool .sec-diagram {
  background: linear-gradient(180deg, #15191F, #0F1620);
  border-color: rgba(0,0,0,0.1);
}
html.theme-light-warm .sec-diagram .sec-layer-label,
html.theme-light-cool .sec-diagram .sec-layer-label { color: #F5F7FA; }
html.theme-light-warm .sec-diagram .sec-layer-note,
html.theme-light-cool .sec-diagram .sec-layer-note { color: #6B7888; }
html.theme-light-warm .sec-diagram .sec-layer,
html.theme-light-cool .sec-diagram .sec-layer {
  background: rgba(11,15,20,0.5);
  border-color: #1F2937;
}

/* Light themes: hero glow needs more warmth, less navy */
html.theme-light-warm .hero-bg,
html.theme-light-cool .hero-bg {
  background:
    radial-gradient(60% 50% at 70% 40%, rgba(201,169,97,0.14), transparent 70%),
    radial-gradient(50% 60% at 20% 70%, rgba(201,169,97,0.06), transparent 70%);
}

/* Modal in light — keep modal surface light but content readable */
html.theme-light-warm .modal,
html.theme-light-cool .modal {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.25);
}
html.theme-light-warm .modal-field input,
html.theme-light-warm .modal-field select,
html.theme-light-cool .modal-field input,
html.theme-light-cool .modal-field select {
  background: var(--surface-input);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
html.theme-light-warm .modal-chip,
html.theme-light-cool .modal-chip {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
html.theme-light-warm .modal-x,
html.theme-light-cool .modal-x {
  background: var(--hover-overlay);
}

/* Light themes: avoid the dotted noise reading as dirt on white */
html.theme-light-warm .security-bg,
html.theme-light-cool .security-bg { opacity: 0.35; }

/* Light themes: faq-item.is-open subtle gold tint reads as too pale,
   bump it slightly so opened item is unmistakable */
html.theme-light-warm .faq-item.is-open,
html.theme-light-cool .faq-item.is-open {
  background: var(--accent-soft);
}