:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --border: #e5e7eb;
    --text: #111827;
    --text-muted: #6b7280;

    --accent: #2563eb;
    --accent-soft: #e0e7ff;

    --success: #059669;
    --success-bg: #d1fae5;

    --legacy: #d97706;
    --legacy-bg: #fef3c7;

    --danger: #dc2626;
    --danger-bg: #fee2e2;
}

body {
    margin: 0;
    padding: 0;
}

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

a:hover {
    cursor: pointer;
    filter: brightness(80%);
}

.content-container {
    box-sizing: border-box;
    margin: 0;
    background-color: var(--behnke-white);
    min-height: calc(100vh - (4 * var(--behnke-basic)));
    width: 100vw;
    margin-top: calc(4 * var(--behnke-basic));
}

.spinner {
    width: var(--behnke-basic);
    height: var(--behnke-basic);

    border: calc(var(--behnke-basic) * 0.15) solid var(--behnke-white);
    border-top: calc(var(--behnke-basic) * 0.15) solid var(--behnke-design);

    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}