/*
 * BibleBridge marketing theme — "Codex"
 * Fixed, standalone palette for the marketing/account surface (homepage,
 * pricing, signup, dashboard, contact, terms, privacy).
 *
 * Every one of those pages links reader.css for its base tokens and layout
 * primitives, then used to layer bb-nav-theme.php's per-preset colors on
 * top of just the nav band -- so the page body stayed reader.css's default
 * light tokens while only the nav mirrored whatever reader theme happened
 * to be active. That's an accident of architecture, not a chosen identity.
 *
 * This file overrides the SAME token names reader.css defines (--bg-page,
 * --text-primary, --accent, etc.) with one fixed palette, linked AFTER
 * reader.css so it wins the cascade. Every existing var(--bg-page) etc.
 * already scattered through these 7 pages repoints automatically -- no
 * per-page rewrite needed. bb-nav-theme.php is no longer used by any of
 * them; the reader's 12 presets are untouched, this never reads from them.
 *
 * Header stays structurally identical to the reader's own .reader-header
 * (fixed, top:0, 60px, padding 0 1rem, z-index 100) -- only the palette
 * differs, not the shape.
 */

:root {
    --bg-page: #0b1020;
    --bg-card: #17152e;
    --bg-subtle: #1d1a38;
    --bg-hover: rgba(109, 94, 245, 0.12);
    --border-light: #241f3f;
    --border-divider: #383163;
    --text-primary: #ecebf8;
    --text-secondary: #c3bfe0;
    --text-muted: #9b94c4;
    --accent: #6d5ef5;
    --accent-hover: #5a4bd6;
    --accent-highlight: #8da2ff;
    --brand-dark: #0b1020;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.35);
    --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.4), 0 8px 28px rgba(109,94,245,0.18);

    /* Type scale -- collapses ~36 near-duplicate sizes found across the
       marketing pages (e.g. 13/14/15px all doing "small text" duty) down
       to 7 real steps. */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lead: 18px;
    --fs-h3: 22px;
    --fs-h2: 28px;
    --fs-h1: 36px;

    /* Spacing scale -- an 8px grid, matching the rhythm already dominant
       across these pages; collapses the odd rem-derived fractions
       (9.6px, 5.6px, etc.) that had crept in around compact UI chrome. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
}

/* Shared fallback focus ring -- every interactive element gets a consistent,
   on-brand ring by default. More specific rules elsewhere (.btn:focus-visible,
   .auth-input:focus-visible, etc.) still win via specificity, so this only
   fills gaps rather than fighting existing treatments. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, iframe:focus-visible {
    outline: 2px solid var(--accent-highlight);
    outline-offset: 2px;
}

.mkt-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--header-height, 60px);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-light);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mkt-nav-brand {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.95rem; font-weight: 600; line-height: 1.6;
    color: var(--text-primary); opacity: 0.92; letter-spacing: 0.02em; text-decoration: none;
}
.mkt-nav-brand:hover { opacity: 1; color: var(--text-primary); }
.mkt-nav-right { display: flex; gap: 1.25rem; align-items: center; margin-left: auto; }
.mkt-nav-right a { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; text-decoration: none; }
.mkt-nav-right a:hover { color: var(--text-primary); }
.mkt-nav-cta {
    background: var(--accent); color: #fff !important;
    padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; font-size: 0.78rem; line-height: 1.6;
}
.mkt-nav-cta:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 640px) {
    .mkt-nav-right a:not(.mkt-nav-cta) { display: none; }
}

.mkt-btn-primary {
    background: linear-gradient(135deg, var(--accent-highlight) 0%, var(--accent) 60%, #4a3fc4 100%);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(109, 94, 245, 0.5);
}
.mkt-btn-secondary {
    background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-divider);
}