/* Relayrix brand system — single source of truth for palette, type, and shared components.
   Human reference: docs/brand/relayrix-brand-guide.md. Load BEFORE any page CSS.
   Light default; auto dark via prefers-color-scheme. All text pairings meet WCAG AA. */
:root{
  --color-primary:#2B57D9; --color-primary-hover:#1E3FA8; --color-primary-tint:#E8EDFC;
  --color-accent:#0D9488; --color-accent-text:#0F766E;
  --color-success:#16A34A; --color-warning:#D97706; --color-danger:#DC2626; --color-info:#0284C7;
  --color-background:#F7F8FA; --color-surface:#FFFFFF; --color-border:#E2E5EA;
  --color-text-strong:#12151B; --color-text-muted:#5B6472;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --radius:12px; --radius-sm:9px; --maxw:1080px;
  --shadow:0 1px 2px rgba(18,21,27,.06),0 8px 24px rgba(18,21,27,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --color-primary:#6E93F5; --color-primary-hover:#547AE0; --color-primary-tint:#16234A;
    --color-accent:#2DD4BF; --color-accent-text:#2DD4BF;
    --color-success:#22C55E; --color-warning:#F59E0B; --color-danger:#F87171; --color-info:#38BDF8;
    --color-background:#0B0F17; --color-surface:#131826; --color-border:#232A3B;
    --color-text-strong:#F5F7FA; --color-text-muted:#9AA3B2;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.4);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);background:var(--color-background);
  color:var(--color-text-strong);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-hover)}
img,svg{display:block}
h1,h2,h3{margin:0 0 .5em;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 16px}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}

/* NOTE: brand component sizing is in px, NOT rem, on purpose. This stylesheet loads
   on top of Skeleton, which sets html{font-size:62.5%} (1rem=10px) on the auth/app
   pages while the landing page (no Skeleton) uses a 16px root. Using rem here made the
   whole brand system render ~62% smaller on Skeleton pages. px makes the brand chrome
   render identically regardless of the host page's root font-size. Values equal the
   original rem intent at a 16px base. */

/* nav + brand lockup (shared by landing, auth, and app headers) */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13.6px clamp(16px,4vw,32px);background:var(--color-background);
  border-bottom:1px solid var(--color-border)}
.brand{display:inline-flex;align-items:center;gap:8.8px;color:var(--color-text-strong);font-weight:700}
.brand__glyph{width:30px;height:30px;border-radius:8px}
.brand__word{font-size:18.4px;letter-spacing:-.02em}
.nav__actions{display:flex;align-items:center;gap:9.6px;flex-wrap:wrap}
.nav__actions a{font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6.4px;font-family:var(--font-sans);
  font-weight:600;font-size:15.2px;line-height:1;padding:9.6px 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;text-transform:none;letter-spacing:normal}
.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}
.btn--secondary{background:var(--color-surface);color:var(--color-text-strong);border-color:var(--color-border)}
.btn--secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--lg{padding:12.8px 22.4px;font-size:16.32px}

/* surface card (shared) */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}

/* form inputs (shared — brands auth + app forms; loads after Skeleton so it wins) */
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  font-family:var(--font-sans);font-size:16px;color:var(--color-text-strong);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:9.6px 12.8px;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,textarea:focus,select:focus{
  outline:none;background:var(--color-surface);color:var(--color-text-strong);
  border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-tint)}
input::placeholder,textarea::placeholder{color:var(--color-text-muted);opacity:.85}
label{color:var(--color-text-strong);font-weight:600;font-size:14.72px}

/* footer (shared) */
.footer{border-top:1px solid var(--color-border);padding:40px clamp(16px,4vw,32px);
  text-align:center;color:var(--color-text-muted);background:var(--color-background)}
.footer__brand{display:inline-flex;align-items:center;gap:8px;color:var(--color-text-strong);
  font-weight:700;margin-bottom:8px}
.footer__brand img{width:22px;height:22px;border-radius:6px}
.footer__tag{margin:4px 0 16px}
.footer__meta a{color:var(--color-text-muted)}
.footer__meta a:hover{color:var(--color-primary)}
.footer__copy{font-size:13.6px;margin:12px 0 0}