/* ─── Heritage layer ───────────────────────────────────────────────────────
 * Sits on top of theme.css + app.css. Adds warm gold accents, serif headers,
 * and ornamental flourishes for the Bishopscourt heritage feel.
 *
 * Tokens are split per theme so the same elements stay readable whether
 * we're on dark Palantir (cream/gold on near-black) or light (deep wine /
 * dark gold on near-white).
 */

:root, body.app.theme-dark {
  --heritage-gold:        #d4b886;
  --heritage-gold-strong: #e6cb9c;
  --heritage-gold-soft:   rgba(212, 184, 134, 0.18);
  --heritage-gold-border: rgba(212, 184, 134, 0.45);
  --heritage-cream:       #f0e8d8;
  --heritage-wine:        #7b1f1f;
  --heritage-wine-strong: #9a2a2a;
  --heritage-wine-soft:   rgba(123, 31, 31, 0.22);
  --heritage-sepia:       #c9a76b;
  --heritage-parchment:   #fbf3e0;

  /* Theme-applied colours: these are what the rules below actually use */
  --h-title:        var(--heritage-cream);
  --h-sub:          var(--heritage-sepia);
  --h-label:        var(--heritage-gold);
  --h-label-soft:   var(--heritage-gold-soft);
  --h-label-border: var(--heritage-gold-border);
  --h-button-bg:    var(--heritage-wine);
  --h-button-hover: var(--heritage-wine-strong);
  --h-button-fg:    var(--heritage-cream);
}

html.light-mode body.app,
body.app.theme-light {
  --heritage-gold:        #a3791c;          /* dark gold for light backgrounds */
  --heritage-gold-strong: #7c5a14;
  --heritage-gold-soft:   rgba(163, 121, 28, 0.10);
  --heritage-gold-border: rgba(163, 121, 28, 0.35);
  --heritage-cream:       #5a3f1a;          /* deep warm brown reads as "heritage" on white */
  --heritage-wine:        #6e1818;
  --heritage-wine-strong: #8b1f1f;
  --heritage-wine-soft:   rgba(110, 24, 24, 0.10);
  --heritage-sepia:       #7c5a3a;
  --heritage-parchment:   #fbf3e0;

  --h-title:        #4a1414;                /* near-black wine for max contrast on white */
  --h-sub:          #7c5a3a;                /* warm brown sub */
  --h-label:        #8a651a;                /* dark gold serif label, AA contrast on white panel */
  --h-label-soft:   rgba(138, 101, 26, 0.10);
  --h-label-border: rgba(138, 101, 26, 0.45);
  --h-button-bg:    #6e1818;
  --h-button-hover: #8b1f1f;
  --h-button-fg:    #fbf3e0;

  /* ── Business-like neutral light palette ──────────────────────────────
   * Clean cool grey / white in the Palantir AIP style — no parchment wash.
   * The heritage gold/wine accents above still provide the brand character,
   * now sitting on a crisp neutral surface instead of beige.
   */
  --bg:           #eef1f6;       /* clean cool light grey for the main area */
  --panel:        #f8fafc;       /* near-white cool for sidebar & topbar */
  --card:         #ffffff;
  --card-hover:   #f3f6fb;
  --surface-elev: #f8fafc;

  --border:        #d8dee7;
  --border-subtle: #e8ecf2;
  --border-strong: #b4bdca;
  --border-hover:  #c6cdd8;

  --text-primary:   #1f2733;
  --text-heading:   #131a24;
  --text-secondary: #45515f;
  --text-muted:     #68747f;
  --text-faint:     #95a0ad;

  --row-hover: rgba(45, 90, 150, 0.05);

  --shadow-sm: 0 1px 3px rgba(20, 30, 50, 0.08), 0 1px 2px rgba(20, 30, 50, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 30, 50, 0.10), 0 2px 4px rgba(20, 30, 50, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 30, 50, 0.14), 0 4px 8px rgba(20, 30, 50, 0.08);
}

/* Business light mode — flat, clean cool background, no warm wash */
body.app.theme-light {
  background-image: none;
}

/* Page titles → serif, theme-aware colour */
.page-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: var(--h-title) !important;
  letter-spacing: 0.01em !important;
}
.page-sub {
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px !important;
  color: var(--h-sub) !important;
  letter-spacing: 0.03em;
}

/* Card section labels */
.app-section-title { color: var(--h-label) !important; }

/* Card header underline */
.app-card-header {
  border-bottom: 1px solid var(--h-label-soft) !important;
  position: relative;
}
.app-card-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 48px;
  background: var(--h-label);
  opacity: 0.7;
}

/* Sidebar */
.sidebar-label {
  color: var(--h-label) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
}
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--h-label) !important;
  background: var(--h-label-soft) !important;
  border-left-color: var(--h-label) !important;
}
.nav-item.active svg,
.nav-item[aria-current="page"] svg { opacity: 1; }

/* Topbar */
body.app.theme-dark .topbar-crumb .current { color: var(--heritage-cream); font-weight: 600; }
body.app.theme-dark .topbar-clock { color: var(--heritage-sepia); border-color: var(--heritage-gold-soft); }

/* Primary button — wine red, looks right in both themes */
.app-btn.primary {
  background: var(--h-button-bg) !important;
  border-color: var(--h-button-bg) !important;
  color: var(--h-button-fg) !important;
}
.app-btn.primary:hover {
  background: var(--h-button-hover) !important;
  border-color: var(--h-button-hover) !important;
}

/* Heritage hero / page banner titles use Cormorant */
.heritage-hero h1,
.guide-header h1,
.heritage-page-banner h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* User avatar gold ring */
.user-avatar {
  background: var(--h-label-soft) !important;
  border-color: var(--h-label-border) !important;
  color: var(--h-label) !important;
}

/* Subtle vignette — dark theme only (would muddy light mode) */
body.app.theme-dark {
  background-image:
    radial-gradient(ellipse at top right, rgba(212, 184, 134, 0.04), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(123, 31, 31, 0.04), transparent 60%);
  background-attachment: fixed;
}

/* Card hover gets a heritage edge */
.app-card:hover { border-color: var(--h-label-border) !important; }

/* History + Videos heritage page banner */
.heritage-page-banner {
  position: relative;
  padding: 32px 28px;
  border-radius: 10px;
  border: 1px solid var(--h-label-soft);
  margin-bottom: 24px;
  background:
    linear-gradient(135deg, rgba(8,11,16,0.82) 0%, rgba(8,11,16,0.94) 90%),
    url('/static/img/hero-house.webp') center/cover no-repeat;
  filter: saturate(0.88);
}
/* Light mode keeps the banner dark — it's a photo with overlay either way */
.heritage-page-banner h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--heritage-cream);                  /* on dark photo overlay, always cream */
  font-weight: 600;
  font-size: 34px;
  margin: 0;
}
body.app.theme-light .heritage-page-banner h1 { color: #f0e8d8; }
.heritage-page-banner .est {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: #d4b886;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.heritage-page-banner .sub {
  margin-top: 8px;
  color: rgba(240,232,216,0.85);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Systems list — magenta titles → heritage gold */
.sys-card-title { color: var(--h-label) !important; }

/* Light mode: tags on systems list need darker tinted backgrounds for contrast */
body.app.theme-light .tag-amber  { background: rgba(217,119,6,0.10) !important; color:#92500a !important; border:1px solid rgba(217,119,6,0.30) !important; }
body.app.theme-light .tag-blue   { background: rgba(37,99,235,0.08) !important; color:#1d4ed8 !important; border:1px solid rgba(37,99,235,0.25) !important; }
body.app.theme-light .tag-teal   { background: rgba(13,148,136,0.08) !important; color:#0f766e !important; border:1px solid rgba(13,148,136,0.25) !important; }
body.app.theme-light .tag-green  { background: rgba(22,163,74,0.08) !important; color:#15803d !important; border:1px solid rgba(22,163,74,0.25) !important; }
body.app.theme-light .tag-rose   { background: rgba(225,29,72,0.07) !important; color:#9f1239 !important; border:1px solid rgba(225,29,72,0.22) !important; }
body.app.theme-light .tag-purple { background: rgba(126,34,206,0.07) !important; color:#6b21a8 !important; border:1px solid rgba(126,34,206,0.22) !important; }