@font-face {
    font-family: 'Nunito';
    src: url('/resources/fonts/Nunito-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 1000;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/resources/fonts/Nunito-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

/* ---- Shell structure ---- */
.app-shell {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-shell__body {
    flex: 1 1 auto;
    min-height: 0;
}

.app-shell__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Shared container ---- */
/* Use on header, content and footer so they align to the same grid. */
.app-container {
    max-width: var(--app-content-max-width);
    padding: 0 var(--app-content-padding-x);
    margin: 0 auto;
}

/* ---- Semantic tone helpers ---- */
.app-tone--success {
    color: var(--app-success);
}

.app-tone--warning {
    color: var(--app-warning);
}

.app-tone--danger {
    color: var(--app-danger);
}

.app-tone--neutral {
    color: var(--mud-palette-text-primary);
}

/* ---- Single-row flex layout (alternative to MudGrid) ---- */
.app-row {
    display: flex;
    gap: var(--app-space-lg);
    align-items: stretch;
}

.app-row > * {
    flex: 1 1 0;
    min-width: 0;
}