@import url("typography.css");

:root { color-scheme: light; --page: #f1f5f4; --surface: #fff; --text: #263238; --border: #dbe5e2; --primary: #168f86; --primary-dark: #0f7069; --danger: #a33a32; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text); line-height: 1.7; }
main { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-card { width: min(100%, 28rem); padding: clamp(1.35rem, 6vw, 2.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 1.35rem; box-shadow: 0 .75rem 2rem rgba(38, 50, 56, .10); }
.login-brand { margin: 0 0 .25rem; color: var(--primary-dark); font-size: .88rem; font-weight: 700; }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.35rem, 6vw, 1.75rem); line-height: 1.45; }
label { display: block; margin: 1.5rem 0 .5rem; font-weight: 700; }
input[type="password"] { width: 100%; padding: .85rem; border: 1px solid #cfd8d6; border-radius: .7rem; background: #fff; color: var(--text); font-size: 1rem; }
input[type="password"]:focus { outline: .2rem solid rgba(22, 143, 134, .25); outline-offset: .15rem; }
button { width: 100%; min-height: 2.9rem; margin-top: 1.25rem; padding: .85rem; border: 0; border-radius: .7rem; background: var(--primary); color: #fff; font-size: 1rem; cursor: pointer; }
button:hover { background: var(--primary-dark); }
.message { margin: .75rem 0; padding: .7rem; border-radius: .6rem; background: #e8f5f3; color: #176b65; }
.error { background: #fff0ef; color: var(--danger); }