/* SpaceEdge Purple/Cyan Theme Override for Lunar Atlas */

:root {
    --primary-purple: #6C63FF;
    --primary-cyan: #00D9FF;
    --deep-space: #0A1128;
    --text-light: #E8EAF6;
    --text-muted: #B0B8C4;
}

/* ============================================
   BACKGROUNDS
   ============================================ */

body {
    background: linear-gradient(135deg, #0A1128 0%, #1a1f3a 100%) !important;
    color: #E8EAF6 !important;
}

/* Header */
header {
    background: rgba(10, 14, 39, 0.95) !important;
    border-bottom: 1px solid rgba(108, 99, 255, 0.2) !important;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #0A1128 0%, #1a1f3a 100%) !important;
}

.hero::before {
    background: 
        radial-gradient(circle at 20% 50%, rgba(108, 99, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(0, 217, 255, 0.15) 0%, transparent 50%) !important;
}

/* Code Section */
.code-section {
    background: #0A1128 !important;
}

.code-block {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(108, 99, 255, 0.2) !important;
}

/* Footer */
footer {
    background: #0A1128 !important;
    border-top: 1px solid rgba(108, 99, 255, 0.2) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary CTA Button - Purple */
.cta-button {
    background: linear-gradient(135deg, #6C63FF 0%, #5B52E8 100%) !important;
    color: #FFFFFF !important;
}

.cta-button:hover {
    background: linear-gradient(135deg, #5B52E8 0%, #4A42C7 100%) !important;
    box-shadow: 0 10px 30px rgba(108, 99, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Secondary CTA Button - Cyan */
.cta-button.secondary {
    background: linear-gradient(135deg, #00D9FF 0%, #00B8D4 100%) !important;
}

.cta-button.secondary:hover {
    background: linear-gradient(135deg, #00B8D4 0%, #0097A7 100%) !important;
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.4) !important;
}

/* Generic button overrides */
.btn-primary,
button[type="submit"]:not(.cta-button),
.primary-button {
    background: #6C63FF !important;
    border-color: #6C63FF !important;
}

.btn-primary:hover,
button[type="submit"]:not(.cta-button):hover {
    background: #5B52E8 !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.beta-badge {
    background: rgba(108, 99, 255, 0.2) !important;
    color: #6C63FF !important;
    border: 1px solid rgba(108, 99, 255, 0.3) !important;
}

.badge,
.tag {
    background: rgba(0, 217, 255, 0.2) !important;
    color: #00D9FF !important;
    border: 1px solid #00D9FF !important;
}

/* ============================================
   TEXT & HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF !important;
}

/* Gradient text highlight in hero */
h1 .highlight {
    background: linear-gradient(135deg, #6C63FF 0%, #00D9FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   STATS & NUMBERS
   ============================================ */

.stat-number {
    color: #00D9FF !important;
}

.stats {
    background: rgba(108, 99, 255, 0.05) !important;
    border: 1px solid rgba(108, 99, 255, 0.2) !important;
}

/* ============================================
   CARDS
   ============================================ */

.feature-card,
.card,
.panel,
.box {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(108, 99, 255, 0.2) !important;
}

.feature-card:hover,
.card:hover,
.panel:hover {
    border-color: #6C63FF !important;
    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2) !important;
}

/* Use Case Cards */
.use-case {
    background: rgba(108, 99, 255, 0.05) !important;
    border-left: 4px solid #6C63FF !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(108, 99, 255, 0.3) !important;
    color: #E8EAF6 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #6C63FF !important;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: #B0B8C4 !important;
}

label {
    color: #E8EAF6 !important;
}

/* ============================================
   SECTIONS
   ============================================ */

.signup-section {
    background: rgba(10, 17, 40, 0.6) !important;
}

.features {
    background: rgba(10, 17, 40, 0.4) !important;
}

.use-cases {
    background: rgba(10, 17, 40, 0.3) !important;
}

.api-guide {
    background: rgba(255, 255, 255, 0.02) !important;
}

.documentation-section {
    background: rgba(10, 17, 40, 0.5) !important;
}

/* ============================================
   CODE & SYNTAX
   ============================================ */

.code-comment {
    color: #00D9FF !important;
}

.guide-code {
    background: #0A1128 !important;
    border: 1px solid rgba(108, 99, 255, 0.2) !important;
}

/* ============================================
   GUIDES & DOCUMENTATION
   ============================================ */

.guide-highlight {
    background: rgba(108, 99, 255, 0.08) !important;
    border-left: 4px solid #6C63FF !important;
}

.success-box {
    background: rgba(0, 217, 255, 0.1) !important;
    border-left: 4px solid #00D9FF !important;
}

.success-box strong {
    color: #00D9FF !important;
}

.warning-box {
    border-left-color: #6C63FF !important;
}

.success-message {
    background: rgba(0, 217, 255, 0.15) !important;
    color: #00D9FF !important;
    border: 2px solid #00D9FF !important;
}

/* ============================================
   TABLES
   ============================================ */

.guide-table th {
    background: rgba(0, 217, 255, 0.1) !important;
    color: #00D9FF !important;
}

.guide-table td {
    color: #B0B8C4 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

table {
    background: rgba(255, 255, 255, 0.02) !important;
}

thead {
    background: rgba(108, 99, 255, 0.1) !important;
}

/* ============================================
   LINKS & NAVIGATION
   ============================================ */

a {
    color: #00D9FF !important;
}

a:hover {
    color: #6C63FF !important;
}

.nav-links a {
    color: #E8EAF6 !important;
}

.nav-links a:hover {
    color: #00D9FF !important;
}

.footer-links a {
    color: #B0B8C4 !important;
}

.footer-links a:hover {
    color: #00D9FF !important;
}

/* Logo accent */
.logo span {
    color: #6C63FF !important;
}

/* ============================================
   UTILITIES
   ============================================ */

.section-title {
    color: #FFFFFF !important;
}

.section-subtitle {
    color: #B0B8C4 !important;
}

/* ============================================
   MAP CONTROLS (if applicable)
   ============================================ */

.leaflet-control,
.map-control {
    background: rgba(10, 17, 40, 0.95) !important;
    border: 1px solid rgba(108, 99, 255, 0.3) !important;
    color: #E8EAF6 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .hero {
        background: #0A1128 !important;
    }
}