/* Base — reset, typography, elements. Mobile-first. Source Sans Pro is loaded from Google Fonts; is in every HTML . */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } picture { display: block; } a { color: var(--color-primary); text-decoration: none; } a:hover, a:focus { color: var(--color-primary-hover); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-weight: var(--font-weight-bold); line-height: 1.2; } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } p { margin: 0 0 var(--space-4); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } /* Forms */ input, select, textarea { font-family: inherit; font-size: var(--font-size-base); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; border-color: var(--color-primary); } label { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); } /* Buttons */ .btn { display: inline-block; padding: var(--space-3) var(--space-5); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.15s ease; line-height: 1.2; } .btn:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; } .btn:disabled, .btn[aria-disabled="true"] { background: #ccc; cursor: not-allowed; color: #fff; } .btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-primary); } .btn-secondary:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } /* Utility */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-muted { color: var(--color-text-muted); } .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .notice { padding: var(--space-3) var(--space-4); background: var(--color-primary-tint); color: var(--color-primary-dark); border-radius: var(--radius-sm); margin-bottom: var(--space-4); } .notice-error { background: #fee; color: var(--color-danger); }