html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --miradore-navy: #13314f;
    --miradore-navy-2: #1b456b;
    --miradore-blue: #2f6f9f;
    --miradore-green: #299d6d;
    --miradore-red: #bd4545;
    --miradore-orange: #d89432;
    --surface: #ffffff;
    --surface-soft: #f7f9fb;
    --page: #f2f5f8;
    --text: #1f2d3a;
    --text-soft: #6f7d89;
    --text-faint: #95a1ac;
    --border: #dfe6ec;
    --border-strong: #ccd7e0;
}

* {
    box-sizing: border-box;
}

html {
    position: relative;
    min-height: 100%;
    background: var(--page);
}

body {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at top right, rgba(47, 111, 159, 0.08), transparent 34%), linear-gradient(180deg, #f8fafc 0%, var(--page) 100%);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

.app-shell,
.app-main {
    min-height: 100vh;
}

button,
input,
select,
textarea {
    font: inherit;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(19, 49, 79, 0.12);
}

::selection {
    background: rgba(19, 49, 79, 0.15);
    color: var(--miradore-navy);
}