/* ===== Theme variables (Tailwind-like overrides for dark hero sections) ===== */
:root {
    --accent: #f20d0d;
}

.bg-background-light { background-color: #f8f5f5; }
.bg-background-dark { background-color: #0a0a0a; }
.text-primary { color: var(--accent); }
.bg-primary { background-color: var(--accent); }
.border-primary { border-color: var(--accent); }
.bg-primary\/5 { background-color: rgba(242, 13, 13, 0.05); }
.bg-primary\/10 { background-color: rgba(242, 13, 13, 0.1); }
.bg-primary\/20 { background-color: rgba(242, 13, 13, 0.2); }
.border-primary\/20 { border-color: rgba(242, 13, 13, 0.2); }
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }

/* ===== Shared components (from head-includes) ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.neon-glow {
    box-shadow: 0 0 15px rgba(242, 13, 13, 0.4);
}

.scanner-line {
    background: linear-gradient(90deg, transparent 0%, #f20d0d 50%, transparent 100%);
    height: 2px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0.6;
}

.glass-panel {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.12);
}