:root {
    --bg:            #0B0F0C;
    --surface:       rgba(20, 26, 22, 0.65);
    --border:        rgba(224, 169, 109, 0.15);
    --border-strong: rgba(224, 169, 109, 0.4);
    --text:          #F2F4F2;
    --muted:         #A8A29E;
    --accent:        #E0A96D;
    --accent2:       #F97316;
    --green:         #10b981;
}

.topo-bg {
    background-color: var(--bg);
    background-image: radial-gradient(circle, rgba(224, 169, 109, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

.tactical-border { border: 1px solid var(--border); }
.tactical-border-strong { border: 1px solid var(--border-strong); }

.glow-gold { box-shadow: 0 0 15px rgba(224, 169, 109, 0.15); }
.glow-orange { box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); }

.eyebrow-mono {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 8px;
    transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); }

.btn-secondary {
    background: rgba(224, 169, 109, 0.05);
    border: 1px solid rgba(224, 169, 109, 0.2);
    color: var(--accent);
    border-radius: 8px;
    transition: background 0.2s;
}
.btn-secondary:hover { background: rgba(224, 169, 109, 0.15); }