/*
 * Privacy page theme normalization.
 * Keeps each page's original accent while fixing dark-mode hierarchy, contrast,
 * and partial color switching issues.
 */

body.privacy-theme-page {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode keeps original direction, but normalizes elevated surfaces. */
html.light-mode body.privacy-theme-page nav {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html.light-mode body.privacy-theme-page footer {
    background: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}

html.light-mode body.privacy-theme-page .doc-panel {
    background: #ffffff !important;
    border-color: rgba(203, 213, 225, 0.85) !important;
    box-shadow: 0 24px 40px -26px rgba(15, 23, 42, 0.22) !important;
}

/* Dark mode: semantic layering inspired by Apple base/elevated surfaces. */
html:not(.light-mode) body.privacy-theme-page {
    background: var(--privacy-bg-dark, var(--bg-body, #0f172a));
    color: var(--privacy-text-dark, var(--text-main, #f1f5f9));
}

html:not(.light-mode) body.privacy-theme-page .bg-grid-pattern {
    background-image:
        linear-gradient(
            to right,
            var(--privacy-grid-dark, rgba(148, 163, 184, 0.16)) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--privacy-grid-dark, rgba(148, 163, 184, 0.16)) 1px,
            transparent 1px
        ) !important;
}

html:not(.light-mode) body.privacy-theme-page nav {
    background: var(--privacy-nav-dark, rgba(15, 23, 42, 0.82)) !important;
    border-color: var(--privacy-border-dark, rgba(148, 163, 184, 0.28)) !important;
}

html:not(.light-mode) body.privacy-theme-page article,
html:not(.light-mode) body.privacy-theme-page .doc-panel {
    background: var(--privacy-surface-dark, rgba(17, 24, 39, 0.92)) !important;
    border-color: var(--privacy-border-dark, rgba(148, 163, 184, 0.26)) !important;
    box-shadow: 0 28px 56px -28px rgba(2, 6, 23, 0.82) !important;
}

html:not(.light-mode) body.privacy-theme-page footer {
    background: var(--privacy-footer-dark, rgba(2, 6, 23, 0.72)) !important;
    border-color: var(--privacy-border-dark, rgba(148, 163, 184, 0.26)) !important;
}

/* Foreground hierarchy */
html:not(.light-mode) body.privacy-theme-page .text-slate-900,
html:not(.light-mode) body.privacy-theme-page .text-stone-900,
html:not(.light-mode) body.privacy-theme-page .text-violet-900 {
    color: var(--privacy-text-dark, var(--text-main, #f1f5f9)) !important;
}

html:not(.light-mode) body.privacy-theme-page .text-slate-800,
html:not(.light-mode) body.privacy-theme-page .text-slate-700,
html:not(.light-mode) body.privacy-theme-page .text-slate-600,
html:not(.light-mode) body.privacy-theme-page .text-slate-500,
html:not(.light-mode) body.privacy-theme-page .text-stone-700,
html:not(.light-mode) body.privacy-theme-page .text-stone-600,
html:not(.light-mode) body.privacy-theme-page .text-stone-500,
html:not(.light-mode) body.privacy-theme-page .text-violet-700,
html:not(.light-mode) body.privacy-theme-page .text-violet-700\/80 {
    color: var(--privacy-text-secondary-dark, var(--text-secondary, #cbd5e1)) !important;
}

html:not(.light-mode) body.privacy-theme-page .text-slate-400,
html:not(.light-mode) body.privacy-theme-page .text-slate-300,
html:not(.light-mode) body.privacy-theme-page .text-stone-400,
html:not(.light-mode) body.privacy-theme-page .text-violet-300 {
    color: var(--privacy-text-tertiary-dark, #94a3b8) !important;
}

/* Secondary surfaces and separators */
html:not(.light-mode) body.privacy-theme-page .bg-white,
html:not(.light-mode) body.privacy-theme-page .bg-white\/50,
html:not(.light-mode) body.privacy-theme-page .bg-white\/80 {
    background: var(--privacy-surface-dark, rgba(17, 24, 39, 0.92)) !important;
}

html:not(.light-mode) body.privacy-theme-page .bg-slate-50,
html:not(.light-mode) body.privacy-theme-page .bg-violet-50\/50,
html:not(.light-mode) body.privacy-theme-page .bg-stone-50 {
    background: var(--privacy-surface-subtle-dark, rgba(30, 41, 59, 0.72)) !important;
}

html:not(.light-mode) body.privacy-theme-page .border-slate-200,
html:not(.light-mode) body.privacy-theme-page .border-slate-200\/60,
html:not(.light-mode) body.privacy-theme-page .border-slate-100,
html:not(.light-mode) body.privacy-theme-page .border-violet-100,
html:not(.light-mode) body.privacy-theme-page .border-stone-100 {
    border-color: var(--privacy-border-dark, rgba(148, 163, 184, 0.26)) !important;
}

html:not(.light-mode) body.privacy-theme-page .h-px.bg-stone-100 {
    background-color: var(--privacy-border-dark, rgba(148, 163, 184, 0.26)) !important;
}

html:not(.light-mode) body.privacy-theme-page .border-l-2 {
    border-color: var(--privacy-border-strong-dark, rgba(148, 163, 184, 0.45)) !important;
}

/* Main CTA in top-right */
html:not(.light-mode) body.privacy-theme-page .privacy-main-link {
    background: rgba(241, 245, 249, 0.12) !important;
    color: var(--privacy-text-dark, #f1f5f9) !important;
    border: 1px solid var(--privacy-border-dark, rgba(148, 163, 184, 0.28)) !important;
}

html:not(.light-mode) body.privacy-theme-page .privacy-main-link:hover {
    background: var(--privacy-accent, #60a5fa) !important;
    color: #020617 !important;
    border-color: transparent !important;
}

/* Keep accent links visible in dark context */
html:not(.light-mode) body.privacy-theme-page a.hover-underline {
    color: var(--privacy-accent, #93c5fd) !important;
}