:root {
    --color-background: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #555555;
    --color-line: #1a1a1a;
    --font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    --spacing-small: 0.75rem;
    --spacing-medium: 1.5rem;
    --spacing-large: 3rem;
    --content-max-width: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: var(--font-family);
    font-weight: 800;
    margin: 0;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-line);
    outline-offset: 3px;
}