/* ============================================================
   Dubai Property Lab — Base Typography & Body Defaults
   Source: DPL_Brand_Reference.md §3
   ============================================================ */

body {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--void);
}

/* --- Headings --- */

h1, .h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h2, .h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h3, .h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

/* --- Overline / Label --- */

.overline {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --- Small / Caption --- */

.caption {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

/* --- KPI Values --- */

.kpi-hero {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.kpi-supporting {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* --- Monospace (data values) --- */

.mono {
    font-family: var(--font-mono);
}

.data-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* --- Links --- */

a {
    color: var(--signal);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-primary);
}

/* --- Content column (article width) --- */

.content-column {
    max-width: 680px;
    margin: 0 auto;
}

/* --- Change indicators --- */

.change-positive {
    color: var(--viz-positive);
}

.change-negative {
    color: var(--viz-negative);
}

.change-neutral {
    color: var(--text-secondary);
}

/* --- Selection --- */

::selection {
    background: var(--signal-dim);
    color: var(--text-primary);
}