/**
 * ONNLY "Obsidian" Theme — shared base
 *
 * Palette + navbar/mobile-nav + button treatment shared by every
 * restyled public page (landing, auth, support). Scoped by body class
 * so unrelated pages (verification, admin, etc.) are unaffected.
 * Load this BEFORE the page-specific theme file (landing-onnly-theme.css,
 * auth-onnly-theme.css, support-onnly-theme.css).
 */

body.landing-page,
body.auth-page,
body.support-page {
    --primary: #ecb2ff;
    --primary-dark: #bd00ff;
    --secondary: #FF007A;
    --dark: #08080C;
    --dark-light: #19101c;
    --gray: #9d8ba0;
    --gray-light: #d4c0d7;
    --light: #eeddee;
    --white: #ffffff;
    --success: #00F0FF;
    --warning: #ffb961;
    --danger: #FF3B30;

    --onnly-magenta: #FF007A;
    --onnly-cyan: #00F0FF;
    --onnly-panic: #FF3B30;
    --onnly-amber: #ffb961;
    --onnly-glass-stroke: rgba(255, 255, 255, 0.08);
    --onnly-surface: #19101c;
    --onnly-surface-container: #261c28;

    background: var(--dark);
    font-family: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.landing-page .mono,
body.auth-page .mono,
body.support-page .mono {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}

/* ========================================
   NAVBAR / MOBILE NAV
   ======================================== */
body.landing-page .navbar,
body.auth-page .navbar,
body.support-page .navbar {
    background: rgba(8, 8, 12, 0.85);
    border-bottom-color: var(--onnly-glass-stroke);
}

body.landing-page .navbar.solid,
body.auth-page .navbar.solid,
body.support-page .navbar.solid {
    background: rgba(8, 8, 12, 0.92);
}

body.landing-page .mobile-bottom-nav, body.landing-page .bottom-nav,
body.auth-page .mobile-bottom-nav, body.auth-page .bottom-nav,
body.support-page .mobile-bottom-nav, body.support-page .bottom-nav {
    background: rgba(19, 11, 22, 0.92);
    border-top-color: var(--onnly-glass-stroke);
}

body.landing-page .mobile-menu-overlay, body.landing-page .mobile-menu,
body.auth-page .mobile-menu-overlay, body.auth-page .mobile-menu,
body.support-page .mobile-menu-overlay, body.support-page .mobile-menu {
    background: var(--dark);
}

body.landing-page .mobile-menu-link:hover, body.landing-page .mobile-menu-link:active,
body.auth-page .mobile-menu-link:hover, body.auth-page .mobile-menu-link:active,
body.support-page .mobile-menu-link:hover, body.support-page .mobile-menu-link:active {
    background: rgba(236, 178, 255, 0.12);
}

/* ========================================
   BUTTONS
   ======================================== */
body.landing-page .bottom-nav-cta, body.landing-page .btn-primary,
body.auth-page .bottom-nav-cta, body.auth-page .btn-primary,
body.support-page .bottom-nav-cta, body.support-page .btn-primary {
    background: linear-gradient(135deg, var(--primary-dark), var(--onnly-magenta));
    box-shadow: 0 4px 20px rgba(255, 0, 122, 0.35);
}

body.landing-page .bottom-nav-cta:hover, body.landing-page .btn-primary:hover,
body.auth-page .bottom-nav-cta:hover, body.auth-page .btn-primary:hover,
body.support-page .bottom-nav-cta:hover, body.support-page .btn-primary:hover {
    box-shadow: 0 8px 28px rgba(255, 0, 122, 0.55);
}

/* --primary is a light lavender in this theme, so the default
   .btn-outline:hover white text (from public-mobile.css) becomes
   near-unreadable on it. Force a dark label instead. */
body.landing-page .btn-outline:hover,
body.auth-page .btn-outline:hover,
body.support-page .btn-outline:hover {
    color: var(--dark);
}

/* ========================================
   Shared "glassy card" pieces reused by landing + support
   (contact form, badges, faq accordion, input focus tint)
   ======================================== */
body.landing-page .section-badge,
body.support-page .section-badge {
    background: rgba(236, 178, 255, 0.12);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

body.landing-page .contact-form,
body.support-page .contact-form {
    background: rgba(26, 26, 36, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--onnly-glass-stroke);
}

body.landing-page .form-input:focus, body.landing-page .form-textarea:focus,
body.landing-page input:focus, body.landing-page textarea:focus, body.landing-page select:focus,
body.support-page .form-input:focus, body.support-page .form-textarea:focus,
body.support-page input:focus, body.support-page textarea:focus, body.support-page select:focus {
    background: rgba(236, 178, 255, 0.08);
}

body.landing-page .faq-item,
body.support-page .faq-item {
    background: rgba(26, 26, 36, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--onnly-glass-stroke);
}

/* Fix: public-mobile.css has a specificity tie between
   ".input-wrapper input{padding-left:2.75rem}" and a later, unscoped
   "input[type=email]{padding:1rem 1.25rem}" — the later rule wins and
   collapses the left padding, so the icon overlaps the placeholder
   text. Re-assert the icon padding here (loaded last) so it wins. */
body.landing-page .input-wrapper input,
body.landing-page .input-wrapper textarea,
body.landing-page .input-wrapper select,
body.support-page .input-wrapper input,
body.support-page .input-wrapper textarea,
body.support-page .input-wrapper select {
    padding-left: 2.75rem;
}