@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

:root {
    --bg: #0a0a0a;
    --bg-sidebar: #0d0d0d;
    --bg-chrome: #1a1a1a;
    --border: #2a2a2a;
    --accent: #d72638;
    --fg: #f0e9f2;
    --fg-muted: #aaa;
    --fg-mute2: #888;
    --fg-mute3: #666;
    --key: #79c0ff;
    --string: #a5d6ff;
    --ok: #7ee787;
    --comment: #6a737d;

    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-lg:   18px;
    --text-xl:   24px;
    --text-2xl:  36px;

    --line-tight:  1.1;
    --line-snug:   1.3;
    --line-normal: 1.6;
    --line-relax:  1.7;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
}

html {
    font-size: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    background: var(--bg);
    color: var(--fg);
}

body {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: var(--line-relax);
    color: var(--fg);
    background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 500;
    line-height: var(--line-snug);
    color: var(--fg);
}

h1 { font-size: var(--text-2xl); line-height: var(--line-tight); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

img { object-fit: contain; max-width: 100%; }

.text-justify { text-align: justify; }
.text-center { text-align: center; }