/* The signed-out page's entire stylesheet (AITRAX-1255).
 *
 * `/login` and the signed-out landing page are the one surface that must render when the
 * build is missing, broken or mid-deploy — a human who cannot sign in cannot reach the
 * page that would tell them why (AITRAX-1254 design note §3). So they stay hand-rendered
 * server-side strings on Web Awesome + the gateway's shared `portal-wa.css`, with zero JS
 * and zero build output, and this file is what is left of `app.css` + `controls.css` once
 * the authenticated surface moved onto React + Tailwind: one button, its interaction
 * states, and the panel's top padding. Everything else in those two files described the
 * dashboard shell and went with it.
 *
 * Two rules from portal-ux-guidelines.md still apply here: text uses TEXT tokens
 * (--wa-color-text-*), never structural ones; and light mode needs stronger accents than
 * dark, so accents mix against the surface rather than against white.
 */

/* The hover/active multiplier flips per theme: a dark surface has headroom to get
   brighter, but a light surface is already near-white and brightness(1.2) clips there —
   a no-op. Light mode darkens instead (AITRAX-1164). */
:root, .wa-dark { --ctl-hover-brightness: 1.2; --ctl-active-brightness: .88; }
.wa-light { --ctl-hover-brightness: .92; --ctl-active-brightness: .85; }

.aiwf-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--wa-form-control-height, 28px);
  padding: 0 var(--sp-5);
  font: inherit; font-size: var(--wa-font-size-2xs); font-weight: 600;
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-form-control-border-radius, 4px);
  text-decoration: none; cursor: pointer;
  transition: filter .1s ease;
}
.aiwf-btn:hover { filter: brightness(var(--ctl-hover-brightness)); }
.aiwf-btn:active { filter: brightness(var(--ctl-active-brightness)); }
.aiwf-btn:focus-visible { outline: 2px solid var(--wa-color-text-link); outline-offset: 2px; }
.aiwf-btn-primary {
  color: var(--wa-color-text-link);
  border-color: color-mix(in srgb, var(--wa-color-text-link) 55%, var(--wa-color-surface-border));
  background: color-mix(in srgb, var(--wa-color-text-link) 12%, var(--wa-color-surface-lowered));
}

.aiwf-signin { padding-top: var(--sp-11); }
.aiwf-signin .aiwf-btn { margin-top: var(--sp-5); }