/* Tandem Client Portal: design tokens and shared controls (dashboard, login, password reset). */
:root{
  --bg:#EDF0F4; --surface:#FFFFFF; --sunk:#F5F7FA; --ink:#18202E; --muted:#5B6678; --line:#D6DCE5;
  --accent:#1D4E89; --accent-ink:#FFFFFF; --accent-soft:#E3ECF7;
  --s0:#7D8799; --s1:#B87A06; --s2:#5E48C7; --s3:#1F7C53;
  --danger:#B3261E; --danger-soft:#FBEAE9;
  --font:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11151B; --surface:#1A2029; --sunk:#151A22; --ink:#E7EBF1; --muted:#98A3B4; --line:#2B3340;
    --accent:#8CB2E6; --accent-ink:#0E1A2B; --accent-soft:#1E2A3B;
    --s0:#8F99AB; --s1:#E0A53A; --s2:#A596F0; --s3:#4FBF8A; --danger:#F08A84; --danger-soft:#3A1F1F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11151B; --surface:#1A2029; --sunk:#151A22; --ink:#E7EBF1; --muted:#98A3B4; --line:#2B3340;
  --accent:#8CB2E6; --accent-ink:#0E1A2B; --accent-soft:#1E2A3B;
  --s0:#8F99AB; --s1:#E0A53A; --s2:#A596F0; --s3:#4FBF8A; --danger:#F08A84; --danger-soft:#3A1F1F;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

select,input[type=text],input[type=email],input[type=password],input[type=date],textarea{
  background:var(--sunk); border:1px solid var(--line); border-radius:8px; padding:7px 10px; min-width:0; max-width:100%;
}
textarea{resize:vertical; width:100%}
.primary{background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:8px 14px; font-weight:600}
.primary:hover{filter:brightness(1.08)}
.primary:disabled{opacity:.6; cursor:progress}
.ghost{background:none; border:1px solid var(--line); border-radius:8px; padding:6px 12px; color:var(--muted)}
.ghost:hover{color:var(--ink); border-color:var(--muted)}
.link{background:none; border:0; padding:0; color:var(--accent); font-weight:500; text-decoration:none}
.link:hover{text-decoration:underline}
.link.danger{color:var(--danger)}
.brand-mark{width:22px; height:22px; border-radius:6px; flex:none;
  background:linear-gradient(90deg,var(--s0) 0 25%,var(--s1) 25% 50%,var(--s2) 50% 75%,var(--s3) 75%)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}