/* ===========================================
   Base Element Styles & Typography
   =========================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg-root);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

._dash-loading { background-color: transparent !important; }

div { color: var(--text-primary); }
p, span, label, h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; }

/* Typography scale */
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; font-size: 1.25rem; }
h4 { font-weight: 600; font-size: 1.1rem; }
h5 { font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary) !important; }

/* Plotly chart text */
.gtitle, .xtitle, .ytitle { fill: var(--text-primary) !important; }