/* =================================================================
   RAXE - Section System
   Dark-first: body is dark by default. Use .light-section for light areas.
   Reusable section backgrounds, transitions, and dark/light patterns.
   Loaded globally via base.html.
   ================================================================= */

/* ===== DEFAULT SECTION (dark — inherits body dark) ===== */
/*
   Since body is now dark (#0b0e14), sections are dark by default.
   No special class needed for dark sections.
*/

/* ===== .section-dark (kept for backward compatibility) ===== */
/*
   Previously used to apply dark backgrounds on a light site.
   Now a no-op / reinforcement since dark is the default.
   Kept so existing templates don't break.
*/
.section-dark {
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
    position: relative;
}

.section-dark .section-title {
    color: var(--color-text-primary);
}

.section-dark .section-subtitle {
    color: var(--color-text-muted);
}

/* ===== .section-alt (subtle dark variation for visual rhythm) ===== */
.section-alt {
    background: var(--color-surface-secondary);
}

/* ===== .light-section (opt-in light background) ===== */
/*
   Use on sections that need a white/light background.
   Resets text colors to dark-on-light for readability.
   Matches the .light-section scope in the unified token system.
*/
.light-section {
    background: #ffffff;
    color: #0f172a;
}

.light-section .section-title {
    color: #0f172a;
}

.light-section .section-subtitle {
    color: #374151;
}

.light-section a {
    color: inherit;
}

.light-section .card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.light-section .trust-badge {
    background: #f1f5f9;
    color: #374151;
}

/* ===== .section-light (legacy alias for .light-section) ===== */
.section-light {
    background: #ffffff;
    color: #0f172a;
}

/* ===== SECTION TRANSITIONS ===== */
/*
   Gradient accent line (3px, cyan->magenta) between sections.
   Opt-in via .section-gradient-top -- add to any section to get the line.
   Consistent with the footer's top gradient line.
*/

.section-gradient-top {
    position: relative;
}

.section-gradient-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
    z-index: 1;
}

/* ===== DARK SECTION CONTENT HELPERS ===== */
/*
   These helpers remain for backward compatibility. Since dark is now the
   default, they are technically redundant for new code. Do not delete yet
   as existing templates may reference .section-dark .card etc.
*/

/* Cards inside dark sections */
.section-dark .card {
    background: var(--color-surface-card, #151a26);
    border-color: var(--color-border-subtle);
}

/* Trust badges in dark sections */
.section-dark .trust-badge {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
}

/* Install box in dark sections */
.section-dark .install-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===== SECTION SPACING ===== */

.section-padded {
    padding: var(--space-3xl) 0;
}

.section-padded-sm {
    padding: var(--space-2xl) 0;
}