/* ==========================================================================
   Dockase theme remap — light (default) + deep-navy dark (html.dark)
   Markup keeps its existing utility classes; this sheet re-skins them through
   the design tokens in static/brand/tokens.css, so ONE rule serves both themes.
   ========================================================================== */

/* ---- Page base ---------------------------------------------------------- */
html { background-color: var(--bg) !important; }
body { background-color: var(--bg) !important; color: var(--text) !important; }

/* ---- Dark hex surfaces → theme surfaces --------------------------------- */
.bg-\[\#0E1013\], .bg-\[\#0a0a0a\], .bg-\[\#0c0c0c\], .bg-\[\#0d0d0d\],
.bg-\[\#080808\], .bg-\[\#050505\], .bg-\[\#0C0E11\], .bg-black,
.bg-zinc-950, .bg-slate-900 {
    background-color: var(--bg) !important;
}
.bg-\[\#0e0e0e\], .bg-\[\#0f0f0f\], .bg-\[\#121212\],
.bg-zinc-900, .bg-slate-800 {
    background-color: var(--bg-raised) !important;
}
.bg-\[\#141414\], .bg-\[\#14161A\], .bg-\[\#1a1a1a\],
.bg-zinc-800, .bg-zinc-700 {
    background-color: var(--bg-overlay) !important;
}

/* Light hex surfaces (parchment/exhibit cards) → raised surface */
.bg-\[\#f8f8f8\], .bg-\[\#f8fafc\], .bg-\[\#f8f9fa\], .bg-\[\#fcfcfc\],
.bg-\[\#fafafa\], .bg-\[\#F5F1E8\], .bg-white,
.bg-zinc-50, .bg-zinc-100, .bg-slate-50, .bg-slate-100 {
    background-color: var(--bg-raised) !important;
}
.bg-white\/95, .bg-white\/90, .bg-white\/80 { background-color: var(--bg-raised) !important; }
.bg-zinc-200, .bg-slate-200 { background-color: var(--fill) !important; }
.bg-white\/5 { background-color: var(--fill-subtle) !important; }
.bg-white\/10 { background-color: var(--fill) !important; }

/* ---- Text --------------------------------------------------------------- */
.text-white, .text-\[\#EDE8DC\],
.text-zinc-50, .text-zinc-100, .text-zinc-200,
.text-slate-50, .text-slate-100, .text-slate-200, .text-gray-50, .text-gray-100 {
    color: var(--heading) !important;
}
/* near-black text sits on gold/light elements — stays dark in both themes */
.text-\[\#0a0a0a\], .text-\[\#121212\], .text-\[\#1A1C23\] { color: #1A2456 !important; }
html.dark .text-\[\#0a0a0a\], html.dark .text-\[\#121212\], html.dark .text-\[\#1A1C23\] { color: #0C1533 !important; }

.text-zinc-300, .text-zinc-700,
.text-slate-300, .text-slate-700, .text-slate-800,
.text-gray-300, .text-gray-700 {
    color: var(--text) !important;
}
.text-zinc-400, .text-zinc-500, .text-zinc-600,
.text-slate-400, .text-slate-500, .text-slate-600,
.text-gray-400, .text-gray-500, .text-gray-600 {
    color: var(--text-muted) !important;
}
.text-zinc-800, .text-zinc-900, .text-slate-900, .text-gray-800, .text-gray-900 {
    color: var(--heading) !important;
}

/* ---- Borders & rings ----------------------------------------------------- */
.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20,
.border-zinc-100, .border-zinc-200, .border-zinc-300,
.border-zinc-700, .border-zinc-800,
.border-slate-100, .border-slate-200, .border-slate-300,
.border-gray-100, .border-gray-200, .border-gray-300 {
    border-color: var(--border) !important;
}
.border-slate-900, .border-\[\#0a0a0a\] { border-color: var(--border-strong) !important; }
.ring-slate-500, .ring-\[\#0a0a0a\] { --tw-ring-color: var(--border-strong) !important; }
.divide-zinc-800 > * + *, .divide-white\/5 > * + * { border-color: var(--border) !important; }

/* ---- Gold (secondary accent) --------------------------------------------- */
/* Gold fills stay gold in both themes; gold text/borders flip via --secondary */
.bg-\[\#E5B75A\], .bg-amber-400, .bg-amber-500 { background-color: var(--gold-400) !important; }
.hover\:bg-\[\#d9a83f\]:hover, .hover\:bg-amber-500:hover { background-color: #D9A83F !important; }
.text-\[\#E5B75A\], .text-amber-300, .text-amber-400, .text-amber-500,
.text-amber-600, .text-amber-700, .text-yellow-400, .text-yellow-500 {
    color: var(--secondary) !important;
}
.border-\[\#E5B75A\], .border-amber-400, .border-amber-500, .border-amber-200 {
    border-color: var(--secondary) !important;
}
.bg-amber-50, .bg-amber-100, .bg-amber-500\/10, .bg-amber-400\/10,
.bg-yellow-500\/10, .bg-yellow-400\/10 { background-color: var(--gold-soft) !important; }

/* ---- Blue / indigo / purple → primary accent ------------------------------ */
.text-indigo-300, .text-indigo-400, .text-indigo-500, .text-indigo-600,
.text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600,
.text-purple-300, .text-purple-400, .text-purple-500,
.text-sky-400, .text-sky-500, .text-cyan-400 {
    color: var(--accent) !important;
}
.bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-purple-500, .bg-purple-600 {
    background-color: var(--accent) !important;
}
.hover\:bg-indigo-700:hover, .hover\:bg-blue-700:hover { background-color: var(--accent-hover) !important; }
.border-indigo-400, .border-indigo-500, .border-blue-400, .border-blue-500,
.border-purple-500, .border-indigo-200, .border-blue-200 {
    border-color: var(--accent) !important;
}
.bg-indigo-50, .bg-indigo-100, .bg-blue-50, .bg-blue-100, .bg-purple-50,
.bg-indigo-500\/10, .bg-indigo-500\/20, .bg-blue-500\/10, .bg-blue-500\/20,
.bg-purple-500\/10, .bg-purple-500\/20, .bg-sky-500\/10 {
    background-color: var(--accent-soft) !important;
}

/* ---- Emerald / green → teal ------------------------------------------------ */
.text-emerald-300, .text-emerald-400, .text-emerald-500, .text-emerald-600,
.text-green-400, .text-green-500, .text-green-600 { color: var(--teal) !important; }
.bg-emerald-500, .bg-green-500, .bg-emerald-600 { background-color: var(--teal) !important; }
.border-emerald-400, .border-emerald-500, .border-green-500 { border-color: var(--teal) !important; }
.bg-emerald-50, .bg-emerald-500\/10, .bg-green-50, .bg-green-500\/10 {
    background-color: var(--teal-soft) !important;
}
.bg-\[\#4DB6AC\] { background-color: var(--teal) !important; }

/* ---- Red → rose ------------------------------------------------------------ */
.text-red-300, .text-red-400, .text-red-500, .text-red-600 { color: var(--rose) !important; }
.bg-red-500, .bg-red-600 { background-color: var(--rose) !important; }
.border-red-400, .border-red-500 { border-color: var(--rose) !important; }
.bg-red-50, .bg-red-500\/10 { background-color: var(--rose-soft) !important; }

/* ---- Gradient display text → flat heading color --------------------------- */
.text-transparent.bg-clip-text {
    background: none !important;
    -webkit-text-fill-color: var(--heading) !important;
    color: var(--heading) !important;
}
.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b {
    background-image: none !important;
}
.from-amber-400, .from-indigo-500, .from-purple-500 {
    --tw-gradient-from: transparent !important;
    --tw-gradient-to: transparent !important;
}

/* ---- Colored glow shadows → soft navy elevation ----------------------------- */
.shadow-\[0_0_40px_rgba\(99\,102\,241\,0\.4\)\],
.shadow-\[0_0_30px_rgba\(245\,158\,11\,0\.35\)\],
[class*="shadow-[0_0_"][class*="rgba(245,158,11"],
[class*="shadow-[0_0_"][class*="rgba(99,102,241"] {
    box-shadow: 0 20px 50px rgba(14, 42, 107, .10) !important;
}

/* ---- Decorative glow blobs → soft brand blobs (GIF motif) -------------------- */
div[class*="blur-2xl"], div[class*="blur-3xl"], div[class*="blur-\["] {
    background: var(--accent-soft) !important;
    opacity: .55 !important;
}
.ai-scan-line { display: none !important; }

/* ---- Brand motifs ------------------------------------------------------------ */
/* Smart-border pulse → quiet 1px rule; gold corner ticks stay (heritage mark) */
.smart-border-container {
    background: none !important;
    animation: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
}
.smart-border-inner { background: var(--bg-raised) !important; }
.corner-accent { border-color: var(--secondary) !important; }
.c-tl, .c-tr, .c-bl, .c-br { border-width: 1px !important; }

/* Parchment exhibit — structure + themed surfaces */
.archive-exhibit {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border-strong);
    padding: 12px;
    margin: 0;
}
.archive-exhibit-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 14px;
}
.archive-exhibit-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading) !important;
    margin: 0;
}
.archive-exhibit-sub {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted) !important;
    margin: 2px 0 0;
}

/* Sealing-wax ornament — fixed wax red in both themes, never a CTA */
.archive-seal {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: #8C2F39 !important;
    color: #F5F1E8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Redaction motif — ink bar reveals text on scroll */
.redacted { position: relative; display: inline-block; }
.redacted::after {
    content: "";
    position: absolute;
    inset: 0 -2px;
    background: var(--heading);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.redacted.revealed::after {
    transform: scaleX(0);
    transform-origin: right center;
}
@media (prefers-reduced-motion: reduce) {
    .redacted::after { transition: none; transform: scaleX(0); }
}

/* ---- Form controls, selection, scrollbars ------------------------------------ */
::selection { background: var(--accent-soft); color: var(--heading); }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    background-color: var(--bg-raised);
    color: var(--text);
    border-color: var(--border-strong);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select option { background-color: var(--bg-raised); color: var(--text); }

::-webkit-scrollbar-thumb { background: rgba(14, 42, 107, .25); }
::-webkit-scrollbar-thumb:hover { background: rgba(14, 42, 107, .4); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(232, 237, 255, .2); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(232, 237, 255, .35); }

/* ---- Code / prose ------------------------------------------------------------- */
.prose { color: var(--text); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose strong { color: var(--heading); }
pre, code { background-color: var(--fill) !important; color: var(--text) !important; }

/* ---- Theme-dependent assets & icons ---------------------------------------- */
/* Logo: blue mark on light, white mark on navy dark */
html:not(.dark) .logo-on-dark { display: none !important; }
html.dark .logo-on-light { display: none !important; }
/* Toggle icons: moon in light mode (go dark), sun in dark mode (go light) */
html:not(.dark) .theme-icon-sun { display: none !important; }
html.dark .theme-icon-moon { display: none !important; }

/* ---- Fractional opacity text/borders ---------------------------------------- */
.text-white\/90, .text-white\/80, .text-white\/70, .text-white\/60 {
    color: var(--heading) !important;
}
.text-white\/50, .text-white\/40 { color: var(--text-muted) !important; }
.border-white\/25, .border-white\/30 { border-color: var(--border-strong) !important; }

/* Translucent surfaces (scrolled nav, overlays) */
.bg-\[\#0E1013\]\/90, .bg-\[\#0E1013\]\/80, .bg-black\/50, .bg-black\/60, .bg-black\/70 {
    background-color: color-mix(in oklab, var(--bg) 88%, transparent) !important;
}
.bg-\[\#121212\]\/90, .bg-zinc-900\/90, .bg-zinc-900\/80 {
    background-color: color-mix(in oklab, var(--bg-raised) 88%, transparent) !important;
}

/* Backdrop overlays that must stay dark in both themes (modals over content) */
.fixed.bg-black\/50, .fixed.bg-black\/60, .fixed.inset-0.bg-black\/70 {
    background-color: rgba(12, 21, 51, .55) !important;
}