/*
 * STPS global application base
 *
 * Keep this file deliberately boring:
 * - design tokens
 * - reset
 * - page/container typography
 *
 * Do NOT put broad button/input rules here.
 * Reusable controls live in components.css and are opt-in by class.
 */

:root {
    --stps-navy: #06235a;
    --stps-navy-dark: #031a46;
    --stps-green: #0aae5b;
    --stps-green-dark: #07994f;

    --stps-text: #102a43;
    --stps-muted: #52606d;
    --stps-border: #cbd2dc;
    --stps-page: #f8fafc;
    --stps-white: #ffffff;

    --stps-blue: #4656e5;
    --stps-blue-dark: #3948cf;

    --stps-success-bg: #e8f6ed;
    --stps-success-text: #166534;
    --stps-error-bg: #fce8e8;
    --stps-error-text: #991b1b;

    --stps-radius: 7px;
    --stps-card-radius: 14px;
    --stps-page-width: 1180px;
    --stps-content-width: 860px;
}

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

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--stps-page);
    color: var(--stps-text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}

.stps-page {
    flex: 1;
    width: 100%;
    max-width: var(--stps-page-width);
    margin: 0 auto;
    padding: 60px 42px 72px;
}

.stps-content {
    width: 100%;
    max-width: var(--stps-content-width);
}

.stps-content-narrow {
    width: 100%;
    max-width: 650px;
}

.stps-page-title {
    margin: 0 0 24px;
    color: var(--stps-navy);
    font-size: 46px;
    line-height: 1.12;
    letter-spacing: -1.3px;
}

.stps-page-lead {
    margin: 0 0 42px;
    max-width: 760px;
    color: #1d2d44;
    font-size: 20px;
    line-height: 1.55;
}

.stps-muted {
    color: var(--stps-muted);
}

.stps-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 700px) {
    .stps-page {
        max-width: 100%;
        padding: 42px 22px 56px;
    }

    .stps-page-title {
        font-size: 36px;
    }

    .stps-page-lead {
        font-size: 18px;
    }
}