@font-face {
    font-family: "Fira Code";
    src: url("/static/fonts/FiraCode-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Fira Code";
    src: url("/static/fonts/FiraCode-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Fira Code";
    src: url("/static/fonts/FiraCode-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Fira Code";
    src: url("/static/fonts/FiraCode-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

:root {
    --bg: #0a0a0b;
    --bg-elevated: #101012;
    --surface: #141416;
    --surface-muted: #18181b;
    --surface-hover: #1c1c1f;
    --text: #e4e4e7;
    --text-strong: #fafafa;
    --text-muted: #71717a;
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-solid: #14b8a6;
    --accent-solid-hover: #0d9488;
    --accent-subtle: rgba(45, 212, 191, 0.14);
    --border: #27272a;
    --border-muted: #1f1f23;
    --border-focus: #2dd4bf;
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
    --error-border: rgba(248, 113, 113, 0.38);
    --header-bg: rgba(10, 10, 11, 0.94);
    --button-text: #ffffff;
    --shadow-card: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}

body {
    font-family: "Fira Code", monospace;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}