:root {
    --bg: #0B141F;
    --surface: #121D2C;
    --surface-2: #17263A;
    --border: #263A50;
    --text: #E7ECF2;
    --text-muted: #8FA3B8;
    --brand-blue: #1B3A5C;
    --brand-blue-light: #6FA8D8;
    --accent: #F39200;
    --accent-strong: #ED921F;
    --success: #34C17B;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

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

a:hover {
    color: var(--accent-strong);
}

input, select, button {
    font-family: var(--font-body);
}

input::placeholder {
    color: #56728C;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent) !important;
}

button {
    cursor: pointer;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: #F0785A;
    font-size: 12px;
}

#blazor-error-ui {
    background: #3A1414;
    border-top: 1px solid #7A2E2E;
    bottom: 0;
    box-sizing: border-box;
    color: var(--text);
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 14px;
}

#blazor-error-ui .reload {
    color: var(--brand-blue-light);
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}