:root {
    --elesco-primary: #1f3a5f;
    --elesco-primary-dark: #152a46;
    --elesco-success: #2e7d5b;
    --elesco-success-light: #e6f3ed;
    --elesco-danger: #c23934;
    --elesco-warning: #b87514;
    --elesco-warning-light: #fff7d6;
    --elesco-error: #b42318;
    --elesco-error-background: #fef3f2;
    --elesco-error-border: #fecdca;
    --elesco-background: #eef2f7;
    --elesco-surface: #ffffff;
    --elesco-text: #1b2430;
    --elesco-text-muted: #5a6472;
    --elesco-required-background: #fffaf0;
    --elesco-required-border: #dfbd81;
    /*
     * Alias because we've used both names in a few places.
     * Could standardize later.
     */
    --elesco-text-secondary: var(--elesco-text-muted);
    --elesco-border: #dfe5ec;
    --elesco-radius-sm: 8px;
    --elesco-radius: 12px;
    --elesco-radius-lg: 14px;
    --elesco-shadow: 0 2px 8px rgba(20, 40, 70, 0.08);
    --elesco-shadow-sm: 0 1px 4px rgba(20, 40, 70, 0.06);
    --elesco-transition: 150ms ease;
}


/* ============================================================
   Reset
   ============================================================ */

html,
body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    min-width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}


/* ============================================================
   Page shell
   ============================================================ */

.elesco-page {
    min-height: 100dvh;
    padding: 1rem 1rem calc(82px + env(safe-area-inset-bottom));
    background: var(--elesco-background);
}


/* ============================================================
   Links
   ============================================================ */

a {
    color: var(--elesco-primary);
    text-decoration: none;
    transition: color var(--elesco-transition), background-color var(--elesco-transition), opacity var(--elesco-transition);
}

    a:hover {
        color: var(--elesco-primary-dark);
    }

    a:focus-visible {
        outline: 2px solid var(--elesco-primary);
        outline-offset: 3px;
        border-radius: 4px;
    }


/* Used when autofocus is only for scrolling/focus restoration. */

h1:focus {
    outline: none;
}


/* ============================================================
   Brand
   ============================================================ */

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: white;
    text-decoration: none;
}

    .brand:hover {
        color: white;
        opacity: .9;
    }

    .brand:visited {
        color: white;
    }