/* Safe Fleet page-level tokens and shared foundations. */

:root {
    --sf-page-width: 1440px;
    --sf-page-padding: 16px;

    --sf-color-white: #ffffff;
    --sf-color-text-muted: rgba(255, 255, 255, 0.8);

    --sf-color-primary: var(--color-primary);
    --sf-color-primary-hover: var(--color-primary-hover);

    --sf-hero-radius: 24px;
}

.sf-page,
.sf-page *,
.sf-page *::before,
.sf-page *::after {
    box-sizing: border-box;
}

.sf-page {
    min-width: 320px;

    color: #182448;
    background: #ffffff;

    font-family: var(--font-family);

    -webkit-font-smoothing: antialiased;
}

.sf-page img,
.sf-page svg {
    display: block;
    max-width: 100%;
}

.sf-page a {
    color: inherit;
    text-decoration: none;
}

.sf-container {
    width: min(
            calc(100% - var(--sf-page-padding) * 2),
            calc(var(--sf-page-width) - var(--sf-page-padding) * 2)
        );

    margin-inline: auto;
}

@media (max-width: 640px) {
    :root {
        --sf-page-padding: 8px;
        --sf-hero-radius: 20px;
    }
    .sf-desktop-break {
        display: none;
    }
}