:root {
    --primary-color: #00838f;
    --primary-color-lighter: #4fb3bf;
    --primary-color-darker: #005662;
    --accent-color: #b0bec5;
    --warn-color: #f44336;
    --gray-text: rgba(0,0,0,.54);
    --background-color: whitesmoke;
    --surface-color: #fff;
    --divider-color: #00000022;
}

html, body {
    height: 100vh;
}

body {
    background: var(--background-color);
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

/* Bootstrap color alignment */
a, .text-primary {
    color: var(--primary-color);
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color-darker);
}

.btn-primary:hover {
    background: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
}

.btn-secondary {
    background: #e9eef1;
    color: #0f172a;
    border-color: #e9eef1;
}

/* Cards a bit softer */
.card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.06);
}

.card-header {
    background: var(--surface-color);
    border-bottom: 1px solid var(--divider-color);
}

/* Inputs – subtle focus to match material-ish feel */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* Center page helpers */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    width: 100%;
    max-width: 420px;
}

.brand {
    text-align: center;
    margin-bottom: 1rem;
}

.brand img {
    width: 64px;
    height: auto;
}

.brand h1 {
    margin: .5rem 0 0 0;
    color: var(--primary-color);
    font-weight: 700;
}