@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/space-grotesk-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chivo';
    src: url('/assets/fonts/chivo/chivo-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chivo';
    src: url('/assets/fonts/chivo/chivo-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/space-mono/space-mono-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

html {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--color-text-main);
    background-color: var(--color-bg);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-s);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin-bottom: var(--space-m); }
a { color: var(--color-accent); text-decoration: none; font-weight: 700; transition: color 0.2s ease;}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin-bottom: var(--space-m); padding-left: var(--space-l); }
li { margin-bottom: var(--space-2xs); }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-m); font-size: var(--step--1); }
th, td { border-bottom: 1px solid var(--color-border); padding: var(--space-xs); text-align: left; }
th { font-family: var(--font-display); font-weight: 700; background: var(--color-surface-alt); }

code { font-family: var(--font-mono); background: var(--color-surface-alt); padding: 0.1em 0.3em; border-radius: 2px; }