@import url('/auth/tokens.css');
/* Public sign-in surface shares the dashboard's compiled brand tokens. */
@font-face { font-family: "BBOC Inconsolata"; src: url("/auth/fonts/inconsolata.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BBOC Condensed"; src: url("/auth/fonts/open-sans-condensed.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --semantic-space-small: var(--semantic-space-sm); --semantic-space-medium: var(--semantic-space-lg); --semantic-space-large: var(--semantic-space-xl); --semantic-space-panel: var(--semantic-space-3xl); --semantic-space-control: var(--semantic-space-touch); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: var(--semantic-space-large); background: var(--semantic-color-background); color: var(--semantic-color-foreground); font: var(--semantic-space-text-body)/1.6 var(--semantic-font-body); }
main { width: 100%; display: grid; place-items: center; }
.session-panel { width: 100%; max-width: var(--semantic-space-session-width); padding: var(--semantic-space-xl); background: var(--semantic-color-surface); border-radius: var(--semantic-radius-panel); border-block-start: var(--semantic-space-small) solid var(--semantic-color-brand); }
.brand { font: var(--semantic-space-xl)/1.3 var(--semantic-font-heading); margin-block-end: var(--semantic-space-panel); }
h1 { font: var(--semantic-space-text-title)/1.15 var(--semantic-font-heading); margin: 0 0 var(--semantic-space-medium); }
p { color: var(--semantic-color-muted); margin: 0 0 var(--semantic-space-large); }
a { display: inline-flex; align-items: center; justify-content: center; gap: var(--semantic-space-small); min-height: var(--semantic-space-control); padding: var(--semantic-space-small) var(--semantic-space-large); color: var(--semantic-color-surface); background: var(--semantic-color-foreground); border-radius: var(--semantic-radius-control); text-decoration: none; font-weight: 700; }
a:hover { background: var(--semantic-color-muted); }
a:focus-visible { outline: var(--semantic-space-small) double var(--semantic-color-foreground); outline-offset: var(--semantic-space-small); }
small { display: block; color: var(--semantic-color-muted); margin-block-start: var(--semantic-space-large); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }