/*
 * Wealthy — Treasury Gold Theme
 * Overrides for policy pages.
 *
 * Mirrors the in-app palette: gold-coin treasury hues on warm parchment
 * (light) and deep midnight on antique gold (dark). Fraunces for editorial
 * title moments, Instrument Sans for subheadings — matching the app's
 * bundled font set.
 */

/* ===========================
   Custom Color Palette — Treasury Gold
   =========================== */
:root {
    /* Light Theme — Warm Parchment */
    --bg-primary: #fbf6e9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3ead0;
    --bg-accent: #ecdfb4;

    --text-primary: #2a1d05;
    --text-secondary: #5e4717;
    --text-tertiary: #8a703a;
    --text-link: #a07410;
    --text-link-hover: #7a5808;

    --border-color: #e2cf95;
    --border-light: #f0e3b8;

    --accent-primary: #b8860b;
    --accent-secondary: #d4af37;
    --accent-success: #6f8d4a;
    --accent-warning: #c1700d;
    --accent-danger: #b34d2e;
}

/* Dark Theme — Midnight Vault */
[data-theme="dark"] {
    --bg-primary: #14110a;
    --bg-secondary: #1d1810;
    --bg-tertiary: #271f12;
    --bg-accent: #322617;

    --text-primary: #fbf6e9;
    --text-secondary: #ddc98d;
    --text-tertiary: #a8915a;
    --text-link: #e8c252;
    --text-link-hover: #f5d979;

    --border-color: #3d2f1a;
    --border-light: #2a2114;

    --accent-primary: #d4af37;
    --accent-secondary: #f0d674;
    --accent-success: #9bb676;
    --accent-warning: #e6963a;
    --accent-danger: #d96a47;
}

/* ===========================
   Editorial Typography
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,500&display=swap');

.policy-title {
    font-family: 'Fraunces', 'Space Grotesk', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.badge-title {
    font-family: 'Fraunces', 'Space Grotesk', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

.badge-subtitle {
    font-family: 'Instrument Sans', 'Space Grotesk', Georgia, sans-serif !important;
    font-style: italic;
    font-weight: 500;
}

.policy-section h2 {
    font-family: 'Fraunces', 'Space Grotesk', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}

.policy-section h3,
.policy-section h4 {
    font-family: 'Instrument Sans', 'Space Grotesk', Georgia, sans-serif !important;
    font-weight: 600 !important;
}

/* ===========================
   Custom Highlight Boxes
   =========================== */
.highlight-box {
    background: linear-gradient(135deg, var(--bg-accent) 0%, #fff8e0 100%);
    border-left-color: var(--accent-primary);
}

[data-theme="dark"] .highlight-box {
    background: linear-gradient(135deg, var(--bg-accent) 0%, #1f1709 100%);
}

.highlight-box.warning {
    background: linear-gradient(135deg, rgba(193, 112, 13, 0.18) 0%, rgba(193, 112, 13, 0.05) 100%);
    border-left-color: var(--accent-warning);
}

/* ===========================
   App Badge — coin card
   =========================== */
.app-badge {
    background: linear-gradient(135deg, #ffffff 0%, #fbf6e9 100%);
    border: 2px solid var(--border-light);
}

[data-theme="dark"] .app-badge {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #221a0e 100%);
}

/* ===========================
   Section header gradient
   =========================== */
.policy-section h2 {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom-color: var(--accent-primary);
}

/* ===========================
   Theme Toggle
   =========================== */
.theme-toggle {
    background: linear-gradient(135deg, #ffffff 0%, #fbf6e9 100%);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .theme-toggle {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #221a0e 100%);
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.28);
}

/* ===========================
   Navigation Links
   =========================== */
.nav-link {
    background: var(--bg-accent);
}

.nav-link:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* ===========================
   Contact Card
   =========================== */
.contact-card {
    background: linear-gradient(135deg, var(--bg-accent) 0%, #fff8e0 100%);
    border: 2px solid var(--border-light);
}

[data-theme="dark"] .contact-card {
    background: linear-gradient(135deg, var(--bg-accent) 0%, #1f1709 100%);
}

.contact-card h3 {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================
   TOC
   =========================== */
.toc-list li:hover {
    border-left-color: var(--accent-primary);
}

.toc-list a:hover {
    color: var(--accent-primary);
}

/* ===========================
   Scrollbar
   =========================== */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ===========================
   Selection
   =========================== */
::selection {
    background: var(--accent-primary);
    color: white;
}

::-moz-selection {
    background: var(--accent-primary);
    color: white;
}

/* ===========================
   Back to Top
   =========================== */
.back-to-top {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
}

.back-to-top:hover {
    background: var(--accent-primary) !important;
    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.36) !important;
}

/* ===========================
   Coin glow on header
   =========================== */
@keyframes coinGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(184, 134, 11, 0.12);
    }
    50% {
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.22);
    }
}

.policy-header {
    animation: coinGlow 4s ease-in-out infinite;
}

/* ===========================
   Link underline
   =========================== */
.policy-section a {
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.policy-section a:hover {
    border-bottom-color: var(--accent-primary);
}