/*
 * Dear Cosmos — Luminous Line Theme
 * Overrides for the policy pages.
 *
 * Mirrors the in-app palette: gold hairlines on a deep void (dark, default
 * idiom) and warm ink on soft paper (light). Cormorant Garamond for editorial
 * title moments, Inter for body and subheadings — the app's bundled font set.
 */

/* ===========================
   Editorial Typography
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

/* ===========================
   Custom Color Palette — Luminous Line
   Daybreak (light) is the default :root; Deep Void (dark) overrides.
   =========================== */
:root {
    /* Daybreak — soft paper */
    --bg-primary: #f6f5f1;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eceae1;
    --bg-accent: #f1eee5;

    --text-primary: #141826;
    --text-secondary: #4a4f5c;
    --text-tertiary: #6e7280;
    --text-link: #8a6420;
    --text-link-hover: #6e4e16;

    --border-color: #e4e0d6;
    --border-light: #efebe1;

    --accent-primary: #a67c2e;
    --accent-secondary: #2e8fa0;
    --accent-success: #4e8a6b;
    --accent-warning: #b5703a;
    --accent-danger: #b04a2e;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Deep Void — the dark default idiom */
[data-theme="dark"] {
    --bg-primary: #05060a;
    --bg-secondary: #0a0c14;
    --bg-tertiary: #0e1220;
    --bg-accent: #11141f;

    --text-primary: #edeff7;
    --text-secondary: #a0a6ba;
    --text-tertiary: #8a90a6;
    --text-link: #e8c879;
    --text-link-hover: #f2d88a;

    --border-color: #2a2e3f;
    --border-light: #1a1e2c;

    --accent-primary: #e8c879;
    --accent-secondary: #7fe3f0;
    --accent-success: #8fd0a8;
    --accent-warning: #e8a06a;
    --accent-danger: #e8896a;
}

/* A faint void wash behind the dark theme, so the page reads as the cosmos
   rather than flat black. */
[data-theme="dark"] body {
    background:
        radial-gradient(120% 80% at 50% -10%, #0a0c14 0%, #05060a 60%);
    background-attachment: fixed;
}

/* ===========================
   Title + heading faces
   =========================== */
.policy-title,
.badge-title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em;
}

.policy-title {
    font-weight: 600 !important;
}

.badge-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.policy-section h2 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em;
    /* Luminous gold section headers. */
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--text-link-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .policy-section h2 {
    background: linear-gradient(135deg, #f2d88a 0%, #b89a55 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom-color: var(--border-color);
}

.policy-section h3,
.policy-section h4 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-primary);
}

/* ===========================
   App badge — a void medallion ringed in gold hairline
   =========================== */
.app-badge {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-accent) 100%);
    border: 1px solid var(--border-color);
}

.badge-icon {
    color: var(--accent-primary);
    text-shadow: 0 0 18px rgba(232, 200, 121, 0.35);
}

/* ===========================
   Highlight boxes
   =========================== */
.highlight-box {
    background: linear-gradient(135deg, var(--bg-accent) 0%, rgba(166, 124, 46, 0.06) 100%);
    border-left-color: var(--accent-primary);
}

[data-theme="dark"] .highlight-box {
    background: linear-gradient(135deg, var(--bg-accent) 0%, rgba(232, 200, 121, 0.06) 100%);
    border-left-color: var(--accent-primary);
}

.highlight-box.warning {
    background: linear-gradient(135deg, rgba(181, 112, 58, 0.16) 0%, rgba(181, 112, 58, 0.04) 100%);
    border-left-color: var(--accent-warning);
}

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

.theme-toggle:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 18px rgba(166, 124, 46, 0.28);
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 4px 18px rgba(232, 200, 121, 0.28);
}

/* ===========================
   Contact card
   =========================== */
.contact-card {
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
}

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

[data-theme="dark"] .contact-card h3 {
    background: linear-gradient(135deg, #f2d88a 0%, #b89a55 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

/* ===========================
   Links — gold hairline underline on hover
   =========================== */
.policy-section a {
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

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

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

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

::selection {
    background: var(--accent-primary);
    color: #05060a;
}

::-moz-selection {
    background: var(--accent-primary);
    color: #05060a;
}

/* ===========================
   Back to top
   =========================== */
.back-to-top {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--text-link-hover) 100%) !important;
    color: #05060a !important;
}

.back-to-top:hover {
    box-shadow: 0 8px 24px rgba(166, 124, 46, 0.36) !important;
}

[data-theme="dark"] .back-to-top:hover {
    box-shadow: 0 8px 24px rgba(232, 200, 121, 0.32) !important;
}

/* ===========================
   Header — a soft, slow gold breath
   =========================== */
@keyframes voidGlow {
    0%, 100% { box-shadow: 0 0 22px rgba(166, 124, 46, 0.08); }
    50%      { box-shadow: 0 0 34px rgba(232, 200, 121, 0.16); }
}

.policy-header {
    animation: voidGlow 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .policy-header { animation: none; }
}