/* Gatekeeper's own pages (sign-in, account setup, its settings page) in
   BrewSite's look. Gatekeeper links this file after its inline styles
   (app/middleware/auth.py brand_stylesheet_url), so equal selectors here win.
   Only its markup's classes are styled: .brand, .card, label, input,
   .btn-primary, .error-msg, .success-msg, .links, hr. Its words are its own.

   One file, two copies: control-frontend/css/auth.css is byte-identical
   (tests/browser/auth-pages.spec.js checks), because the same URL is served
   from each front end's folder on its own host. Palette: docs/DESIGN-TOKENS.md,
   the values admin.css uses. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f6f4ee;
  --surface: #f6f4ee;
  --ink: #1f241f;
  --muted: #5d5a4f;
  --green: #1d3b2a;
  --green-deep: #1d3b2a;
  --on-green: #f6f4ee;
  --focus: #1d3b2a;
  --hair: color-mix(in srgb, var(--muted) 25%, var(--paper));
  --field: var(--muted);
  --ok: var(--green);
  --ok-bg: color-mix(in srgb, var(--green) 7%, var(--paper));
  --error: var(--ink);
  --error-bg: #e7e5dd;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161815;
    --surface: #161815;
    --ink: #e7e5dd;
    --muted: #e7e5dd;
    --green: #7fb894;
    --green-deep: #7fb894;
    --on-green: #161815;
    --focus: #c9a45a;
    --error-bg: #1f241f;
    color-scheme: dark;
  }
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(40px, 12vh, 120px) 16px 48px;
}

/* Gatekeeper owns this markup. Keep its accessible BrewSite text and replace
   only its visual treatment with the supplied outlined lockup, never a B tile. */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.brand-name {
  width: 200px;
  height: 43px;
  flex: none;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
  background: url('/admin/brand/brewsite-horizontal.svg') center / contain no-repeat;
}
.brand-name::before { content: none; }
@media (prefers-color-scheme: dark) {
  .brand-name { background-image: url('/admin/brand/brewsite-horizontal-dark.svg'); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: none;
  padding: clamp(22px, 5vw, 32px);
  margin-bottom: 18px;
}
/* setup_account nests its "invalid link" notice in a second card. */
.card .card {
  border-color: var(--hair);
  box-shadow: none;
  padding: 16px;
  margin: 0 0 12px;
}

h1 {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--green-deep);
  margin-bottom: 22px;
}
h2 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--green-deep);
  margin-bottom: 12px;
}
p {
  color: var(--muted);
  margin-bottom: 14px;
}

.form-group {
  margin-bottom: 16px;
}
label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="email"] {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  margin-bottom: 0;
  border: 1px solid var(--field);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
  box-shadow: none;
}

button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: .875rem;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, filter .15s;
}
.btn-primary {
  background: var(--green);
  color: var(--on-green);
}
.btn-primary:hover {
  background: var(--green);
  text-decoration: underline;
}
.btn-secondary {
  background: var(--surface);
  border-color: var(--field);
  color: var(--ink);
}
.btn-danger {
  background: var(--surface);
  border-color: var(--error);
  color: var(--error);
}
button.btn:focus-visible, .link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.error-msg, .success-msg {
  padding: 10px 13px;
  margin-bottom: 16px;
  border-radius: 10px;
  font-size: .9375rem;
}
.error-msg {
  background: var(--error-bg);
  color: var(--error);
}
.success-msg {
  background: var(--ok-bg);
  color: var(--ok);
}

.links {
  margin-top: 18px;
  text-align: center;
}
.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration-thickness: 2px;
}

hr {
  border: none;
  border-top: 1px solid var(--hair);
  margin: 26px 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}