body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    background-color: var(--color-bg-light);
    color: var(--color-text-main);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-weight: 600;
    line-height: 1.2;
    font-family: var(--font-headline);
}

.alert {
    text-align: left;
    padding: var(--spacing-md);
    margin: var(--spacing-xl) 0;
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-brand-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    overflow: hidden;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gutter-x);
    padding-left: var(--gutter-x);
}

.container-fluid {
    margin-left: calc(var(--gutter-x) * -1);
    margin-right: calc(var(--gutter-x) * -1);
    padding-left: var(--gutter-x);
    padding-right: var(--gutter-x);
}

.jumbotron {
    padding: var(--gutter-y) var(--gutter-x);
}

.jumbotron hr {
    border-top: 1px dashed var(--color-border-dark);
    border-bottom: none;
}

.jumbotron .jumbotron-page-title {
    position: relative;
    z-index: 2;
    font-weight: 600;
    color: var(--color-text-light);
}

.button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-family: var(--font-body);
    font-weight: 600;

    line-height: var(--button-line-height, 1.2);
    box-sizing: border-box;
    margin: 0;
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;

    border: var(--stroke-thin) solid transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;

    padding: var(--button-padding-y-md, var(--spacing-xs)) var(--button-padding-x-md, var(--spacing-sm));
    font-size: var(--button-font-size-md, var(--font-size-sm));
    border-radius: var(--button-radius-md, var(--radius-md));

    color: var(--color-on-primary);
    background-color: var(--color-brand-primary);
}

.button:hover,
.btn:hover {
    background-color: var(--color-brand-primary-hover);
    box-shadow: var(--spatial-shadow-sm) color-mix(in srgb, var(--color-shadow-default), var(--opacity-shadow-sm) transparent);
}

.button:focus-visible,
.btn:focus-visible {
    outline: var(--stroke-medium) solid var(--color-brand-primary-subtle);
    outline-offset: var(--stroke-medium);
    box-shadow: var(--spatial-shadow-sm) color-mix(in srgb, var(--color-shadow-default), var(--opacity-shadow-sm) transparent);
}

.button:disabled,
.btn:disabled {
    opacity: 0.6;
    background-color: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.button.full,
.btn.full,
.btn-w-100 {
    width: var(--size-layout-full);
}

.button-sm,
.btn-sm {
    padding: var(--button-padding-y-sm, var(--spacing-xxs)) var(--button-padding-x-sm, var(--spacing-xs));
    font-size: var(--button-font-size-sm, var(--font-size-xs));
    border-radius: var(--button-radius-sm, var(--radius-sm));
}

.button-lg,
.btn-lg {
    padding: var(--button-padding-y-lg, var(--spacing-sm)) var(--button-padding-x-lg, var(--spacing-md));
    font-size: var(--button-font-size-lg, var(--font-size-md));
    border-radius: var(--button-radius-lg, var(--radius-lg));
}

.button-primary,
.btn-primary {
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-on-primary);
}
.button-primary:hover,
.btn-primary:hover {
    background-color: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary-hover);
}

.button-secondary,
.btn-secondary {
    background-color: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: var(--color-on-secondary);
}
.button-secondary:hover,
.btn-secondary:hover {
    background-color: var(--color-brand-secondary-hover);
    border-color: var(--color-brand-secondary-hover);
}

.button.outlined,
.btn.outlined,
.btn-outline-primary,
.button-outline-primary {
    border-color: var(--color-brand-primary-subtle);
    background-color: var(--color-brand-primary-container);
    color: var(--color-brand-primary);
}
.button.outlined:hover,
.btn.outlined:hover,
.btn-outline-primary:hover,
.button-outline-primary:hover {
    background-color: var(--color-brand-secondary-container);
}

.button.success,
.btn.success,
.button-success,
.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-success);
}
.button.success:hover,
.btn.success:hover,
.button-success:hover,
.btn-success:hover {
    background-color: var(--color-on-success-container);
    border-color: var(--color-on-success-container);
}

.button.danger,
.btn.danger,
.button-danger,
.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-on-error);
}
.button.danger:hover,
.btn.danger:hover,
.button-danger:hover,
.btn-danger:hover {
    background-color: var(--color-on-error-container);
    border-color: var(--color-on-error-container);
}

.button.warning,
.btn.warning,
.button-warning,
.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-on-warning);
}
.button.warning:hover,
.btn.warning:hover,
.button-warning:hover,
.btn-warning:hover {
    background-color: var(--color-on-warning-container);
    border-color: var(--color-on-warning-container);
}

.button-info,
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-on-info);
}
.button-info:hover,
.btn-info:hover {
    background-color: var(--color-on-info-container);
    border-color: var(--color-on-info-container);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-family: var(--font-body);
    font-weight: 600;

    line-height: var(--button-line-height, 1.2);
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    border: var(--stroke-thin) solid transparent;

    padding: var(--button-padding-y-md, var(--spacing-xs)) var(--button-padding-x-md, var(--spacing-sm));
    font-size: var(--button-font-size-md, var(--font-size-sm));
    border-radius: var(--button-radius-md, var(--radius-md));

    color: var(--color-on-primary);
    background-color: var(--color-brand-primary);

    white-space: nowrap;
    user-select: none;
    cursor: default;
}

.badge.pill,
.badge-pill {
    border-radius: var(--radius-pill);
}

.badge.outlined,
.badge-outline-primary {
    border-color: var(--color-brand-primary-subtle);
    background-color: var(--color-brand-primary-container);
    color: var(--color-brand-primary);
}

.badge-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-on-primary);
}

.badge-secondary {
    background-color: var(--color-brand-secondary);
    color: var(--color-on-secondary);
}

.badge.success,
.badge-success {
    background-color: var(--color-success);
    color: var(--color-on-success);
}

.badge.danger,
.badge-danger {
    background-color: var(--color-error);
    color: var(--color-on-error);
}

.badge.warning,
.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-on-warning);
}

.badge-info {
    background-color: var(--color-info);
    color: var(--color-on-info);
}

section {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.section-header {
    font-family: var(--font-headline);
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
    text-transform: capitalize;
    letter-spacing: -0.02em;
    word-spacing: 0.08em;
    margin: 0 0 1.5rem;
    text-wrap: balance;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    padding: 0;
}

main {
    flex-grow: 1;
}