/* ============================================================================
   theme-editorial.css — Delectable AI editorial brand skin (paper · navy · gold).

   THE STANDARD re-skin layer for shared demo templates. As of 2026-06 the
   partner/analyst/customer portals (public-sap, public-forrester, …) use a warm
   editorial palette — ivory paper, deep navy, gold/copper, Fraunces display +
   Inter — instead of the old dark "glassmorphism" dashboard theme.

   Link this AFTER a template's own <style>/stylesheet so it overrides:

       <link rel="stylesheet" href="theme-editorial.css">

   It re-skins the dark/Tailwind dashboard family (data-insights-dashboard,
   embeddings-projector, challenge-*) to the editorial palette. Templates with
   bespoke <style> still get the tokens + base; a few may need per-file tweaks.
   Single source of truth for the brand tokens — do not re-hardcode palettes.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper:    #F4EEE3;
  --paper-2:  #ECE3D1;
  --card:     #FAF6EC;
  --card-2:   #FFFFFF;
  --ink:      #111C24; /* Rich ink slate black */
  --body:     #243342; /* Deep charcoal navy for excellent readability */
  --muted:    #415161; /* Dark slate grey (passes WCAG AA 4.5:1 on cream) */
  --muted-2:  #5A6C7C; /* Medium slate grey for placeholders and boundaries */
  --navy:     #0D1927; /* Rich deep navy */
  --navy-2:   #152436;
  --gold:     #9A7E32; /* Rich dark gold for optimal contrast */
  --gold-soft:#B59845;
  --copper:   #9E5624; /* Rich warm copper */
  --rust:     #882E1E; /* Deep crimson rust red */
  --sap:      #0B60AC; /* Dark sapphire blue */
  --rule:     rgba(17, 28, 36, 0.15);
}

/* ---- Base ---- */
body {
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--body) !important;
}
h1, h2, h3, h4 { font-family: 'Fraunces', serif !important; color: var(--ink) !important; }
code, pre { font-family: 'JetBrains Mono', monospace; }
::-webkit-scrollbar-track { background: var(--paper-2) !important; }
::-webkit-scrollbar-thumb { background: var(--copper) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--rust) !important; }

/* ---- Glassmorphism → light editorial cards ---- */
.glass, .glass-bright {
  background: var(--card) !important;
  border: 1px solid var(--rule) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 30px rgba(24, 34, 46, 0.05) !important;
}
.glass-bright { background: var(--card-2) !important; }

/* ---- Tailwind dark utilities → editorial ---- */
.text-white { color: var(--ink) !important; }
.text-gray-200, .text-gray-300, .text-slate-200, .text-slate-300 { color: var(--body) !important; }
.text-gray-400, .text-gray-500, .text-gray-600, .text-slate-400, .text-slate-500 { color: var(--muted) !important; }
.bg-slate-950, .bg-slate-900, .bg-slate-800, .bg-slate-700,
.bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-gray-600 { background-color: var(--card) !important; }
.border-slate-600, .border-slate-700, .border-slate-800,
.border-gray-600, .border-gray-700, .border-white\/5, .border-white\/10, .border-white\/20 { border-color: var(--rule) !important; }

/* Neutralize dark gradient panel stops to flat editorial card (keeps chart gradients alone) */
.from-slate-900, .from-slate-800, .from-gray-900, .from-gray-800,
.via-indigo-950, .via-indigo-900, .via-purple-950, .via-slate-900,
.to-slate-900, .to-slate-800, .to-gray-900 {
  --tw-gradient-from: var(--card) !important;
  --tw-gradient-via: var(--card) !important;
  --tw-gradient-to: var(--card) !important;
  --tw-gradient-stops: var(--card), var(--card) !important;
}

/* ---- Accent badges → editorial ---- */
.ai-badge.teal  { background: rgba(36, 69, 54, 0.12) !important;  color: var(--navy) !important; }
.ai-badge.green { background: rgba(36, 69, 54, 0.12) !important;  color: var(--navy) !important; }
.ai-badge.purple{ background: rgba(184, 112, 61, 0.14) !important; color: var(--copper) !important; }
.ai-badge.blue  { background: rgba(10, 110, 209, 0.12) !important; color: var(--sap) !important; }
.ai-badge.amber { background: rgba(194, 162, 74, 0.18) !important; color: #8A6D12 !important; }

/* ---- Common chrome (nav menu, spinner) ---- */
.nav-menu { background: var(--card) !important; border: 1px solid var(--rule) !important; }
.nav-title { color: var(--muted) !important; }
.nav-button { background: var(--navy) !important; color: var(--paper) !important; }
.nav-button.current { background: linear-gradient(135deg, var(--copper), var(--gold)) !important; color: #fff !important; }
.loading { border-color: rgba(24, 34, 46, 0.2) !important; border-top-color: var(--copper) !important; }