:root {
    /* FMG brand */
    --fmg-blue-900: #03275f;
    --fmg-blue-800: #04347f;
    --fmg-blue-700: #063e9d;
    --fmg-blue-600: #1757b8;
    --fmg-blue-100: #e8f0fc;
    --fmg-blue-050: #f3f7fd;

    /* Surfaces */
    --surface-page: #f5f7fa;
    --surface-card: #ffffff;
    --surface-subtle: #f8fafc;

    /* Text */
    --text-primary: #1f2937;
    --text-secondary: #5f6b7a;
    --text-muted: #7c8797;

    /* Borders */
    --border-default: #d9e0e8;

    /* Statuses */
    --status-success: #18794e;
    --status-success-background: #e9f6ef;
    --status-warning: #9a6700;
    --status-warning-background: #fff6dd;
    --status-danger: #b42318;
    --status-danger-background: #fef0ee;

    /* Layout */
    --content-width-narrow: 960px;
    --content-width-default: 1320px;
    --navbar-height: 48px;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Shape */
    --radius-small: 6px;
    --radius-medium: 10px;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

.portals-container {
    width: min(100% - 2rem, var(--content-width-default));
    margin-inline: auto;
}

.portals-container--narrow {
    max-width: var(--content-width-narrow);
}

.portals-container--fluid {
    width: 100%;
    max-width: none;
    padding-inline: 1rem;
}

.app-main {
    min-height: calc(100vh - var(--navbar-height));
}