:root {
    --primary: #2F343A;
    --primary-dark: #181B1F;
    --secondary: #6B7280;
    --accent: #F7FA7A;
    --accent-strong: #DCE238;
    --heading: #111827;
    --text: #374151;
    --text-muted: #5B6472;
    --surface: #FFFFFF;
    --surface-alt: #F4F5F2;
    --surface-soft: #ECEDE8;
    --surface-dark: #111827;
    --on-surface: #374151;
    --on-surface-alt: #374151;
    --on-dark: #F9FAFB;
    --on-primary: #FFFFFF;
    --radius: 22px;
    --shadow: 0 24px 70px rgba(17, 24, 39, 0.13);
    --font-heading: Arial, Helvetica, sans-serif;
    --font-body: Arial, Helvetica, sans-serif;
}

body {
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text);
    background: var(--surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--heading);
}

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

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