/*
 * Refract — Prism Theme
 * Overrides for the policy pages.
 *
 * Mirrors the in-app palette: warm ivory paper with deep-violet ink (Morning
 * Light, the default idiom) and a warm dark (Quiet Evening). Fraunces for
 * editorial title moments, Figtree for body and subheadings — the app's
 * bundled font set. Section headers carry a quiet prism gradient (pink → violet).
 */

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

/* ===========================
   Custom Color Palette — Prism
   Morning Light (light) is the default :root; Quiet Evening (dark) overrides.
   =========================== */
:root {
    /* Morning Light — warm ivory paper */
    --bg-primary: #faf2e6;
    --bg-secondary: #fefaf1;
    --bg-tertiary: #f5ecd9;
    --bg-accent: #fffdf9;

    --text-primary: #1d0e2e;
    --text-secondary: #52416d;
    --text-tertiary: #6f5d8a;
    --text-link: #8d47e1;
    --text-link-hover: #6e2bc0;

    --border-color: #e7ddcb;
    --border-light: #f0e8d8;

    --accent-primary: #8d47e1;
    --accent-secondary: #2366ea;
    --accent-success: #167e5c;
    --accent-warning: #986500;
    --accent-danger: #cd3300;

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

/* Quiet Evening — the warm dark idiom */
[data-theme="dark"] {
    --bg-primary: #16111f;
    --bg-secondary: #201a2e;
    --bg-tertiary: #1b1525;
    --bg-accent: #2a2340;

    --text-primary: #f7efe2;
    --text-secondary: #b6aecb;
    --text-tertiary: #8f86a6;
    --text-link: #c79bf2;
    --text-link-hover: #d9bbf8;

    --border-color: #322a45;
    --border-light: #241d33;

    --accent-primary: #9b5de5;
    --accent-secondary: #5b8def;
    --accent-success: #7de8c5;
    --accent-warning: #ffc24c;
    --accent-danger: #ff7a4e;
}

/* A faint violet wash behind the dark theme, so the page reads as the
   evening light rather than flat black. */
[data-theme="dark"] body {
    background:
        radial-gradient(120% 80% at 50% -10%, #1b1525 0%, #16111f 60%);
    background-attachment: fixed;
}

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

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

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

.policy-section h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    /* Prism section headers — pink → violet, the two anchor hues of the
       chromatic glow. */
    background: linear-gradient(135deg, #db0057 0%, #8d47e1 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, #ff6aa6 0%, #b288ef 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: 'Figtree', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-primary);
}

/* ===========================
   App badge — an ivory medallion ringed in a 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(155, 93, 229, 0.35);
}

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

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

.highlight-box.warning {
    background: linear-gradient(135deg, rgba(205, 51, 0, 0.12) 0%, rgba(205, 51, 0, 0.03) 100%);
    border-left-color: var(--accent-danger);
}

[data-theme="dark"] .highlight-box.warning {
    background: linear-gradient(135deg, rgba(255, 122, 78, 0.16) 0%, rgba(255, 122, 78, 0.04) 100%);
    border-left-color: var(--accent-danger);
}

/* ===========================
   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(141, 71, 225, 0.28);
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 4px 18px rgba(155, 93, 229, 0.30);
}

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

.contact-card h3 {
    background: linear-gradient(135deg, #db0057 0%, #8d47e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .contact-card h3 {
    background: linear-gradient(135deg, #ff6aa6 0%, #b288ef 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 — violet 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, #db0057 0%, #8d47e1 100%);
}

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

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

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

/* ===========================
   Back to top
   =========================== */
.back-to-top {
    background: linear-gradient(135deg, #db0057 0%, #8d47e1 100%) !important;
    color: #faf2e6 !important;
}

.back-to-top:hover {
    box-shadow: 0 8px 24px rgba(141, 71, 225, 0.36) !important;
}

[data-theme="dark"] .back-to-top:hover {
    box-shadow: 0 8px 24px rgba(155, 93, 229, 0.34) !important;
}

/* ===========================
   Header — a soft, slow prism breath
   =========================== */
@keyframes prismGlow {
    0%, 100% { box-shadow: 0 0 22px rgba(141, 71, 225, 0.08); }
    50%      { box-shadow: 0 0 34px rgba(219, 0, 87, 0.12); }
}

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

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