:root {
    --bg-main: #f8fafc;
    --bg-soft: #f1f5f9;
    --card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --brand-accent: #b99746;
    --brand-accent-hover: #9e7f37;
    --brand-gold: #b99746;
    --brand-silver: #cbd5e1;
}

html,
body {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

body {
    position: relative;
    overflow-x: hidden;
}

/* Keep content above animated canvas layer */
body > * {
    position: relative;
    z-index: 1;
}

#live-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(185, 151, 70, 0.2) !important;
    backdrop-filter: blur(10px);
}

.bg-brand-deep {
    background-color: var(--bg-main) !important;
}

.bg-brand-graphite {
    background-color: var(--bg-soft) !important;
}

.bg-brand-steel {
    background-color: var(--card) !important;
}

.bg-black {
    background-color: #0f172a !important;
}

.text-white {
    color: var(--text-main) !important;
}

.text-gray-300,
.text-gray-400,
.text-gray-500 {
    color: var(--text-muted) !important;
}

.text-brand-gold {
    color: var(--brand-accent) !important;
}

.bg-brand-gold {
    background-color: var(--brand-accent) !important;
}

.hover\:bg-brand-goldhover:hover {
    background-color: var(--brand-accent-hover) !important;
}

.border-brand-gold {
    border-color: var(--brand-accent) !important;
}

.text-brand-deep {
    color: #ffffff !important;
}

.selection\:bg-brand-gold::selection {
    background: var(--brand-accent);
    color: #ffffff;
}

.border-white\/5,
.border-white\/10,
.border-white\/20 {
    border-color: rgba(71, 85, 105, 0.2) !important;
}

/* Readability boosts */
p,
li,
label,
input,
textarea,
select,
td,
th {
    color: var(--text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
}

footer,
footer p,
footer li,
footer h4,
footer .text-white {
    color: #e2e8f0 !important;
}

.brand-primary {
    color: var(--brand-gold) !important;
}

.brand-secondary {
    color: var(--brand-silver) !important;
}