:root {
    --font-heading: system-ui, Georgia, serif;
    --font-body: system-ui, 'Helvetica Neue', Arial, sans-serif;
    --font-buttons: system-ui, inherit;
    --primary-color: #111111;
    --secondary-color: #555555;
    --bg-color: #ffffff;
    --heading-font-size: 2.2rem;
    --body-font-size: 1rem;
    --container-spacing: 2rem;
    --button-bg: #111111;
    --button-text: #ffffff;
    --button-hover-bg: #333333;
    --button-radius: 2rem;
    --button-padding: 0.5rem 1.5rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    background: var(--bg-color);
    color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-size: var(--heading-font-size);
}

.btn, button, input[type="submit"], .podcast-link {
    background: var(--button-bg);
    color: var(--button-text);
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    border: none;
    transition: 0.2s;
}

.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--button-hover-bg);
    cursor: pointer;
}

.container {
    padding: var(--container-spacing) 1.5rem;
}